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">></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.
Есть ли быстрое грязное исправление, как я могу изменить только цвет / цвет фона определенного слова?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
В этом особом случае это возможно с помощью селектора 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>Я ошибаюсь или это не просто жесткое кодирование 3-го диапазона? Для этого потребуется, чтобы фрагмент кода никогда не менялся.
@JoshM Да, вы правы - ответ как раз для этого конкретного случая.
Чтобы достичь желаемого без жесткого кодирования элемента HTML, созданного PrismJS, я хочу предложить подход на основе Javascript / JQuery. Этот подход исходит из идеи синтаксиса уценки, хотя он не зависит от синтаксиса и может быть изменен на что угодно. Процесс следующий:
- Создайте идентификатор для текста, который хотите изменить. Это поможет в дальнейшем включить его в наш определенный тег HTML. Например, заключите текст в двойные звездочки перед строкой и после нее. Опубликованный вами фрагмент HTML будет выглядеть следующим образом:
<pre>
<code class = "language-php">
$user->hasOne('App\Phone','**user_id**','id');
</code>
</pre>
- Затем создайте сценарий, который изменит эти двойные запуски на то, что вы хотите. Вы хотели изменить цвет шрифта и цвет фона, поэтому вы должны написать что-то вроде следующего и запустить его после загрузки 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.
Идеально! Спасибо!