javascript - prismjs:突出显示单个单词

Question

我正在使用 https://prismjs.com突出显示我的代码，它工作得很好。

举个例子

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

结果

我只想在这种情况下更改 'user_id' 的字体颜色和背景颜色(不是一般情况下，我不想更改 ' 的颜色id' 或 'App\Phone')。我只是想强调它，因为这个词本身对于给定的上下文很重要。这可能吗？

我在源码中发现js-script将上面的代码改成了

<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>

如果我将此代码复制并粘贴到我的原始 html 文件中，它将像以前一样呈现。如果我向 span 元素添加类似 style="background-color: red !important;" 的内容，它会被 js 文件忽略和覆盖。

是否有快速修复方法可以仅更改特定单词的颜色/背景颜色？

Answer 1

对于这种特殊情况，可以使用 nth-child() 选择器。数一下 <span>标记并使用这样的选择器:

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

这是一个 CSS 示例(PHP 在 Stack Snippet 中无法正常工作)。你应该给这个实例一个特殊的类(这里作为例子 .special )只将更改应用到这个单个实例:

.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>