prismjs: highlight single words

I am using to highlight my code and it works very well.

Here is an example

  <code class="language-php">

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 'AppPhone'). 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">'AppPhone'</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>

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?


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 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="" rel="stylesheet" />
<script src=""></script>

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

Leave a Reply

Your email address will not be published. Required fields are marked *