Призматический ярлык 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 проблемы:

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

  • Более важным, даже замененным, как показано в задаче 1, highliter не будет выделять какой-либо код, и все просто черное. Несмотря на то, что он работает для 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>

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

Ответы

Ответ 1

Используйте <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>

Ответ 2

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

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

Ответ 3

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

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

<pre data-src="assets/partials/picture.html"></pre>

Ответ 4

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

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

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

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

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

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

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