Prismjs：高亮显示单个单词

Question

Prismjs：高亮显示单个单词

6

我正在使用 https://prismjs.com 来高亮显示我的代码，它的效果非常好。

以下是一个例子：

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

这会导致

我想仅更改此实例中'user_id' 的字体颜色和背景颜色（而不是一般情况下，我不想更改'id'或'App\Phone'的颜色）。我只想突出显示它，因为对于特定上下文来说，这个单词本身非常重要。这可行吗？

我在源代码中发现js脚本将上述代码更改为

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

有没有什么快速而简单的解决方法可以仅更改特定单词的颜色/背景颜色？

- Adam

3个回答

2

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

- Robin A. Meade

1

为了实现您想要的功能，而不是在PrismJS生成的HTML元素中硬编码，我建议使用基于Javascript/JQuery的方法。这种方法来自于Markdown语法的思想，虽然它是语法无关的，可以根据您的喜好进行更改。具体步骤如下：

1. 在您想要更改的文本上创建一个标识符。这将有助于稍后用我们定义的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'>$1</span>"));
    });
});

关于上述第（2）点的一些注意事项：

请注意，我将CSS样式作为替换双星号的的属性插入。您可以将CSS更改为任何您想要的样式，但这意味着两个双星号之间的任何字符串都将更改为该特定样式。
您可以将特定模式（例如双星号）分配给特定样式。更好的是，您可以向特定模式添加CSS类。例如，双星号可以被一个名为“font-color-and-background”或其他任何名称的类命名的”替换，并使该类应用该样式。这将是：



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


如果要将正则表达式更改为另一种模式，请用您想要的模式替换\*\*（特别是因为双星号是Markdown语法模式，可能会产生冲突）。最后，我对PrismJS毫不了解，因此不确定所有PrismJS生成的片段是否都属于code-toolbar类。

- faremal

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- andreas · Accepted Answer

使用nth-child()选择器可以处理这种特殊情况。只需计算标签的数量，然后使用以下选择器:

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