代码之家 › 专栏 › 技术社区 › Adam

prismjs:突出显示单个单词

prismjs css3 css javascript

2

Adam · 技术社区 · 6 年前

我正在使用 https://prismjs.com 突出显示我的代码,它工作得很好。

下面是一个例子

<pre>
<code class=“language php”>
$user->hasone('app\phone','user_id','id');
&代码/代码;
&;
< /代码> 

结果是



我想更改此实例中'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=“令牌标点符号”>(</span>
<span class=“token string”>'app\phone'</span>
<span class=“令牌标点符号”>,</span>
<span class=“token string”>'用户ID'</span>
<span class=“令牌标点符号”>,</span>
<span class=“token string”>'id'</span>
<span class=“令牌标点符号”>)</span>
<span class=“令牌标点符号”>;</span>
&代码/代码;
&;
< /代码> 

如果我将此代码复制并粘贴到我的原始文件中,它将像以前一样呈现。如果我添加类似于style=“background color:red!重要提示;“对于span元素,它将被JS文件忽略并重写。


是否有一个快速肮脏的修复方法,我只能更改特定单词的颜色/背景色?

<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文件,它将像以前一样呈现。如果我加上style="background-color: red !important;"对于SPAN元素,它将被JS文件忽略并重写。

是否有一个快速肮脏的修复方法,我只能更改特定单词的颜色/背景色?

1 回复 | 直到 6 年前

1

2

andreas 6 年前

对于这种特殊情况,可以使用 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>