HTML-подсветка Prism

Я использую 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>

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

Источник

7 ответов

Решение

Использование <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>
Источник

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

<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>
Источник

Решить вопрос 1):

Вы можете использовать плагин Neccaped-разметка

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

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

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

Решить вопрос 2):

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

Источник

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

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

Источник

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

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

<pre data-src="assets/partials/picture.html"></pre>
Источник

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

Источник

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

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

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

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

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