pyramidjs：高亮显示单个单词

Question

我正在使用https://prismjs.com突出显示我的代码，并且效果很好。

这是一个例子

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

结果

我只想在这种情况下更改'user_id'的字体颜色和背景颜色（通常，我不希望更改'id'或{{1 }}）。我只想强调它，因为单词本身对于给定的上下文很重要。这可能吗？

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

'App\Phone'

如果我将此代码复制并粘贴到我的原始<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元素，它将被js文件忽略并覆盖。

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

Answer 1

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

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

这是CSS的示例（在堆栈摘录中，PHP在某种程度上无法正常工作）。您应该为此实例提供一个特殊的类（这里以示例.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 语法思想，尽管它与语法无关，并且可以更改为您喜欢的任何内容。流程如下：

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

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

2. 接下来，创建一个脚本，将这些双开始更改为您想要的。您想更改字体颜色和背景颜色，因此您应该编写如下内容并在加载 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 样式作为替换双星的 <span></span> 的属性。您可以将 CSS 更改为您想要的任何内容但这意味着两个双星内的任何和所有字符串都将更改为该特定样式。
• 您可以为特定样式指定特定图案（例如双星）。更好的是，您可以将 CSS 类添加到特定模式。例如，双星可以替换为 <span></span> 具有名为“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>"));
    });
});

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