javascriptcssprismjs

prismjs: highlight single words

I am using https://prismjs.com to highlight my code and it works very well.

Here is an example

<pre>
  <code class="language-php">
   $user->hasOne('App\Phone','user_id','id');
  </code>
</pre>

which results in

enter image description here

I would like to change the font-color and background-color for 'user_id' only in this instance (not in general, I don't want to change the colors of 'id' or 'App\Phone'). I just want to highlight it because the word itself is important for a given context. Is this possible?

I found in the source code that the js-script changes the above code to

<pre class="language-php">
 <code class="language-php">
  <span class="token variable">$user</span>
  <span class="token operator">-</span>
  <span class="token operator">&gt;</span>
  <span class="token function">hasOne</span>
  <span class="token punctuation">(</span>
  <span class="token string">'App\Phone'</span>
  <span class="token punctuation">,</span>
  <span class="token string">'user_id'</span>
  <span class="token punctuation">,</span>
  <span class="token string">'id'</span>
  <span class="token punctuation">)</span>
  <span class="token punctuation">;</span>
 </code>
</pre>

If I copy and paste this code into my original html file it will render as before. If I add something like style="background-color: red !important;" to a span element, it will be ignored and overridden by the js file.

Is there a quick dirty fix how I can change only the color/background-color of a specifc word?

Solution

  • It is possible for this special case by using the nth-child() selector. Just count the <span> tags and use a selector like this:

    .language-css > span:nth-child(3)

    Here is an example with CSS (PHP syntax highlighting is somehow not working here in the Stack Snippet). You should give this instance a special class (here as an example .special) to only apply the changes to this single instance:

    .special.language-css>span:nth-child(3) {
  font-weight: bold;
  font-style: italic;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/themes/prism.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.js"></script>

<pre>
  <code class="special language-css">
   p:nth-child(2) {
     background: red;
   }
  </code>
</pre>