prismjs: выделите отдельные слова - PullRequest
Новая
       11

prismjs: выделите отдельные слова

0 голосов
/ 10 сентября 2018

Я использую https://prismjs.com, чтобы выделить мой код, и он работает очень хорошо.

Вот пример 

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

, что приводит к

enter image description here

IЯ хотел бы изменить цвет шрифта и цвет фона для '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>

Если я скопирую и вставлю этот код в мойИсходный файл html будет отображаться как прежде.Если я добавлю что-то вроде style="background-color: red !important;" к элементу span, он будет проигнорирован и переопределен файлом js.

Есть ли быстрое грязное исправление, как я могу изменить только цвет / цвет фона указанного объекта?слово

1 Ответ

0 голосов
/ 10 сентября 2018

Для этого особого случая это возможно с помощью селектора 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;
   }
...