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文件中，它将像以前一样呈现。如果我style="background-color: red !important;"向 span 元素添加类似的内容，它将被 js 文件忽略并覆盖。

是否有一个快速的肮脏修复，如何仅更改特定单词的颜色/背景颜色？

Answer 1

对于这种特殊情况，可以使用nth-child()选择器。只需计算<span>标签并使用如下选择器即可：

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

这是一个 CSS 示例（PHP 语法突出显示在堆栈片段中不知何故不起作用）。您应该为该实例指定一个特殊的类（此处作为示例.special），以仅将更改应用于该单个实例：

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

.special.language-css>span:nth-child(3) {
  font-weight: bold;
  font-style: italic;
}