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 文件忽略和覆盖。

有没有快速解决方法可以只更改特定单词的 color/background-color？

Answer 1

对于这种特殊情况，可以使用 nth-child() 选择器。只需计算  标签并使用这样的选择器：

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

这是一个 CSS 的示例（PHP 在 Stack Snippet 中以某种方式无法正常工作）。您应该给这个实例一个特殊的 class（这里作为示例 .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>

Answer 2

为了在不对 PrismJS 生成的 HTML 元素进行硬编码的情况下实现您想要的效果，我想建议使用基于 Javascript/JQuery 的方法。这种方法来自 markdown 语法思想，尽管它与语法无关，可以更改为您喜欢的任何内容。过程如下：

为要更改的文本创建一个标识符。这将有助于稍后用我们定义的 HTML 标记将其括起来。例如，在字符串前后用双星将文本括起来。您发布的 HTML 片段将如下所示：

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

接下来，创建一个脚本，将那些双启动更改为您想要的。你想改变字体颜色和背景颜色，所以你应该在加载 PrismJS 后编写如下内容和运行：

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

上面数字 (2) 的一些注释：

请注意，我插入了 CSS 样式作为替换双星的  的属性。您可以将 CSS 更改为您想要的任何内容但是这意味着两个双星中的任何和所有字符串都将更改为该特定样式。
您可以为特定样式分配特定图案（例如双星）。更好的是，您可以将 CSS class 添加到特定模式。例如，双星可以替换为具有 class 名称“font-color-and-background”或任何其他名称的 ，并让 class 应用样式。这将是：

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

要将正则表达式更改为另一种模式，请将 \*\* 替换为您想要的模式（特别是因为双星是降价语法模式，可能会产生冲突）。最后，我完全没有使用 PrismJS 的经验，所以我不确定是否所有 PrismJS 生成的片段都是 class code-toolbar.

Answer 3

要让 prismjs 仅突出显示一行的部分，请使用 keep-markup 插件。

在下面的示例中，我将目标括在 ... 中。我创建了一个 CSS 规则来设置它的样式。

注意：它不一定是 mark 元素；我选择它是因为它在语义上最合适。

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.com/ajax/libs/prism/1.25.0/themes/prism.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-php.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-markup-templating.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/keep-markup/prism-keep-markup.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/normalize-whitespace/prism-normalize-whitespace.min.js"></script>

prismjs：突出显示单个单词

prismjs: highlight single words

javascript

css

prismjs