prismjs:高亮显示单个单词
prismjs:高亮显示单个单词
提问于 2018-09-11 02:58:01
我使用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">></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文件覆盖。
有没有一个快速的解决方法，我可以只改变一个特定单词的颜色/背景颜色？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-09-11 03:21:08
对于这种特殊情况，可以使用nth-child()选择器。只需计算<span>标记并使用选择器，如下所示：
.language-css > span:nth-child(3)下面是CSS的一个例子(PHP在Stack代码片段中不能正常工作)。您应该为此实例提供一个特殊的类(此处作为示例.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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52263885
复制相关文章
相似问题