I am using 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

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?

I am using https://prismjs. 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

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?

• javascript
• css
• prismjs

3 Answers 3

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./ajax/libs/prism/1.15.0/themes/prism.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare./ajax/libs/prism/1.15.0/prism.js"></script>

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

To have prismjs highlight just part of a line, use the keep-markup plugin.

In the following example, I enclose the target within <mark>...</mark>. And I create a CSS rule to style it.

Note: It didn't have to be the mark element; I chose that because it is the most semantically appropriate.

pre code mark { 
    background-color: yellow;
    border: 1px solid red;
    padding: 2px;
    font-style: italic;
}

<h2>Demo of prismjs keep-markup plugin</h2>

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

<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/prism/1.25.0/themes/prism.min.css"/>
<script src="https://cdnjs.cloudflare./ajax/libs/prism/1.25.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/prism/1.25.0/ponents/prism-php.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/prism/1.25.0/ponents/prism-markup-templating.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/prism/1.25.0/plugins/keep-markup/prism-keep-markup.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/prism/1.25.0/plugins/normalize-whitespace/prism-normalize-whitespace.min.js"></script>

In order to achieve what you want without hardcoding an HTML element that is generated by PrismJS, I want to propose using a Javascript/JQuery based approach. This approach came from the markdown syntax idea, although, it is syntax-agnostic and can be changed to anything you like. The process is the following:

1. Create an identifier on the text you want to change. This will assist in enclosing it later with our defined HTML tag. For example, enclose the text with double stars before the string and after. The HTML snippet you posted would then look like this:

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

2. Next, create a script that will change those double starts to what you want. You wanted to change the font-color and background-color, so you should write something like the following and run after PrismJS is loaded:

$(document).ready(function() {
    $(".code-toolbar").children().each(function() {
        $(this).html($(this).html().replace(/\*\*(.*?)\*\*/gm, "<span style='color: white; background-color: red !important'>$1</span>"));
    });
});

Some notes for number (2) above:

• Notice that I inserted the CSS style as an attribute of the <span></span> that is replacing the double stars. You can change the CSS to anything you want BUT that means that any and all strings within two double stars will be changed to that specific style.
• You can assign specific patterns (such as the double stars) to specific styles. Even better, you can add a CSS class to a specific pattern. For example, double stars can be replaced by a <span></span> having a class named "font-color-and-background" or anything else and have the class apply the style. This would be:

$(document).ready(function() {
    $(".code-toolbar").children().each(function() {
        $(this).html($(this).html().replace(/\*\*(.*?)\*\*/gm, "<span class='font-color-and-background'>$1</span>"));
    });
});

To change the regex to another pattern replace the \*\* with the pattern you want (especially since the double stars are a markdown syntax pattern and may give a conflict). Finally, I am not at all experienced with PrismJS so I am not sure whether all PrismJS generated snippets are of class code-toolbar.