Подсветка Prism HTML

Я использую Prism, и он хорошо работает с CSS:

<pre><code class="language-css">p { color: red }</code></pre>

но я не могу заставить его работать для html:

<pre><code class="language-html"><p class="red">red text</p></code></pre>

У меня есть 2 проблемы:

  1. < и > представлены как теги, а не как текст, но я мог бы заменить их на &lt; и &gt;

  2. Что еще более важно, даже при замене, как показано в задаче 1, хайлитер не будет выделять код, и все будет просто черным. Несмотря на то, что он работает для CSS, весь код выглядит так:

<!DOCTYPE html>
<html>
    <head>
        <link href="prism.css" rel="stylesheet" />
    </head>
    <body>
        <script src="prism.js"></script>
        <pre><code class="language-css">p { color: red }</code></pre>
    </body>
</html>

Спасибо за любую помощь.


html syntax-highlighting prism.js
person kajacx    schedule 28.01.2013    source источник

Ответы (7)


arrow_upward
51
arrow_downward

Используйте <code class="language-markup"> для оформления HTML-кода.

Кроме того, вам нужно только экранировать начало тегов с помощью &lt;, не беспокойтесь о символах &gt;. Самый простой способ — вставить свой HTML-код в тег pre, а затем выполнить поиск и замену для всех < символов.

Это должно работать:

<!DOCTYPE html>
<html>
    <head>
        <link href="prism.css" rel="stylesheet" />
    </head>
    <body>
        <script src="prism.js"></script>
        <pre><code class="language-markup">
            &lt;p class="red">red text &lt;/p>
        </code></pre>
    </body>
</html>
person Nathan Jones    schedule 25.03.2013
comment
О, чувак, все эти html-объекты делают исходный код уродливым ... Кто-нибудь знает, почему Prismjs изо всех сил старается удалить html-теги? Это параметр, который может быть установлен в значение true или false... - person Jet Blue; 05.05.2015
comment
nm, видел эту беседу на Github... это не Prism, а из-за тега ‹pre›... - person Jet Blue; 05.05.2015
comment
Насколько я понимаю, тег ‹pre› поддерживает встроенные теги html. Как это не проблема с призмой? - person Stan Bashtavenko; 30.07.2015
comment
Или вы можете поместить код, который хотите выделить, в файл, а Prism загрузит и выделит его из файла и вставит на страницу. - person steviesama; 28.05.2016
comment
Я использую обычный HTML и разбиваю его на JavaScript. В сочетании с бьютификатором работает очень хорошо. Я нахожу это особенно полезным, когда хочу увидеть как код, так и визуализированный пример, клонируя пример и помещая его в теги <pre><code class="language-markup">. - person MCTaylor17; 09.09.2016
comment
Другой способ обработки синтаксиса HTML — обернуть HTML-код в <script type="prism-html-markup"></script>, как предлагается здесь: stackoverflow.com/a/27495949/1097123. Я думаю, что это намного лучше, чем замена < на &lt; - person kimbaudi; 30.01.2017

arrow_upward
4
arrow_downward

Чтобы решить проблему 1):

Вы можете использовать плагин unexcaped-markup.

Вот как это работает:

<script type="text/plain" class="language-markup">
   <p>Example</p>
</script>

Чтобы игнорировать первый и последний возвраты, я бы рекомендовал использовать плагин нормализации пробелов.

Чтобы решить проблему 2):

Не существует languages-html см. http://prismjs.com/index.html#languages-list. HTML — это язык разметки гипертекста, поэтому он включен в language-markup. Это то, что вы должны использовать.

person Adam    schedule 09.01.2018

arrow_upward
2
arrow_downward

У меня была такая же проблема с HTML. Я не хотел заменять ‹, > на < >, поэтому я поместил код внутри элементов textarea внутри скрытого div и после загрузки страницы скопировал содержимое всех текстовых полей в элементы кода. Таким образом, я смог сохранить код как есть и отобразить его без проблем.

Очевидным недостатком, конечно, является то, что без JS нет контента, но опять же, подсветка тоже не будет работать.

person Hardev    schedule 24.03.2016
comment
Вам не нужно заменять < и > на &lt; и &rt;. Просто оберните свой HTML-код в <script type="prism-html-markup"></script>. Взгляните на stackoverflow.com/a/27495949/1097123. - person kimbaudi; 30.01.2017

arrow_upward
1
arrow_downward

Лучшее решение — сохранить HTML-код, который вы хотите выделить, в отдельный файл. Вам нужно будет включить плагин выделения файлов в файл js.

Подсветка синтаксиса будет проработана из расширения

<pre data-src="assets/partials/picture.html"></pre>
person steve    schedule 28.07.2016

arrow_upward
1
arrow_downward

Я хочу добавить, что еще одна очень простая возможность — использовать архаичный тег <xmp> следующим образом:

<pre><code class="language-html">
<xmp>
  <p>this markup is now rendered as expected although your IDE might be upset about you using that old tag</p>
</xmp>
</code></pre>
person oehmaddin    schedule 27.11.2020

arrow_upward
0
arrow_downward

На самом деле я столкнулся с той же проблемой, когда я поместил prism js и prism css на html-страницу, но не смог выделить. Не уверен, что это будет проблемой для других, но для меня это был какой-то глобальный css, который был установлен как черный цвет для всего кода, предварительные теги. После того, как я удалил этот цвет оттуда, начала отображаться подсветка призмы. Если это все еще не работает, вы можете следовать этой статье Подсветка синтаксиса кода с использованием Prism js. Я не видел большой разницы, но у меня возникла проблема, когда я поместил prism js под код, который хотел выделить. Когда я переместил это наверх, он начал работать. Если у кого-то есть проблемы, они могут попробовать это.

person Shubham    schedule 12.12.2020

arrow_upward
0
arrow_downward

Я думаю, что ответ Адама должен быть лучшим решением в этом случае. Я просто подробнее остановлюсь на использовании плагина unexcaped-markup, чтобы сделать подсветку HTML в самый простой способ.

Поскольку ‹script /› будет работать только с одной строкой кода, вы можете вставить простой HTML-комментарий, чтобы избежать всех ваших кодов:

<pre class="language-markup"><code><!--
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
--></code></pre>

Все внутри комментария будет напечатано красиво. Стоит попробовать, если вам нужно напечатать HTML-разметку с помощью Prism.

person lewishole    schedule 21.07.2021