Разметка не отображается с помощью Prism JS

Я пытаюсь использовать PrismJS в качестве синтаксического ярлыка для своего блога blogspot. После проблем с синтаксисом Highlighter, я подумал, что попробую попробовать призму.

Мой код выглядит так:

<pre class="line-numbers language-markup">
    <code>
        <b:if cond='data:blog.url == "http://domain.com/p/about.html"'>
            <style type="text/css">
                font-size: 22px;
            </style>
        </b:if>
    </code>
</pre>

Я включил файл prismjs перед тегом </head>.

Работает CSS, никаких ошибок в моей консоли Chrome нет, но script не показывает разметки.

У меня есть jsFiddle с тем же кодом на моем сайте, и он также не отображает номера строк, даже если мой сайт делает. http://jsfiddle.net/fyqnz/

Пример сайта: http://www.xarpixels.com/2013/05/bloggers-conditional-statements-legacy.html

Любая идея, почему это не работает?

Ответ 1

class="language-*" должен идти элемент <code>, а не элемент <pre>. Сначала я делал эту ошибку.

Обновлено с правильной информацией

Кажется, JS Fiddle не нравится Prism. Работая отлично на CodePen и локально на моей машине: http://codepen.io/anon/pen/xmwji. Призма использует Regex для определения выделенных разделов. Удостоверьтесь, что вы избегаете своего кода. Открытие тегов (символ <) должно быть записано как < и закрытие тегов (символ >) как >.

Ответ 2

Немного поиграл с этим плагином и обнаружил, что замена < и > с > и < была своего рода болью. Для чего стоит, если вы оберните свой html тегом script, все будет интересно. Поскольку html внутри нетипизированного тега script не очень хорошо работает с Visual Studio, я дал ему тип prism-html-разметки.

<pre>
    <code class="language-markup">
        <script type="prism-html-markup">
            <h1 class="foo">h1. Heading 1</h1>
            <h2>h2. Heading 2</h2>
            <h3>h3. Heading 3</h3>
            <h4>h4. Heading 4</h4>
            <h5>h5. Heading 5</h5>
            <h6>h6. Heading 6</h6>
        </script>
    </code>
</pre>

Надеюсь, это поможет!

Ответ 3

Добавьте дополнительные теги "xmp" между "кодом" и поместите свой HTML-код в теги "xmp". Работал для меня.

<pre class="language-markup line-numbers">
<code>
<xmp>
<h1>Test</h1>
</xmp>
</code>
</pre>

Ответ 4

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

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

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

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