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

Я использую 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 файл будет отображаться как раньше. Если я добавлю что-то вроде style="background-color: red !important;" для элемента span он будет игнорироваться и переопределяться файлом js.

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

Источник

3 ответа

Решение

Это возможно для этого особого случая, используя 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>

Источник

Чтобы prismjs выделял только часть строки, используйте плагин keep-markup .

В следующем примере я заключаю цель в <mark>...</mark>. И я создаю правило CSS для его стилизации.

Примечание. Это не обязательно должен быть элемент метки ;Я выбрал это, потому что это наиболее подходит семантически.

Источник

Чтобы достичь желаемого без жесткого кодирования элемента HTML, созданного PrismJS, я хочу предложить подход на основе Javascript/JQuery. Этот подход исходит из идеи синтаксиса уценки, хотя он не зависит от синтаксиса и может быть изменен на что угодно. Процесс следующий:

  1. Создайте идентификатор для текста, который хотите изменить. Это поможет в дальнейшем включить его в наш определенный тег HTML. Например, заключите текст в " " перед строкой и " " после. Опубликованный вами фрагмент HTML будет выглядеть следующим образом:
      <pre>
    <code class="language-php">
        $user->hasOne('App\Phone','**user_id**','id');
    </code>
</pre>
  1. Затем создайте сценарий, который изменит эти двойные запуски на то, что вы хотите. Вы хотели изменить цвет шрифта и цвет фона, поэтому вы должны написать что-то вроде следующего и запустить его после загрузки 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 к определенному шаблону. Например, двойные звезды можно заменить на <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.

Источник
Другие вопросы по тегам