Markup Not Showing Up Using Prism JS

Question

I\'m trying to use PrismJS as my syntax highlighter for my blogspot blog. After having troubles with Syntax Highlighter, I thought I would give prism a try.

My code

Answer 1

You can use the unescaped-markup plugin

This is how it works:

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

To ignore first and last returns I would recommend using the normalize whitespace plugin.

Answer 2

Did a little playing around with this plugin and found that replacing < and > with > and < was kind of a pain. For what its worth if you wrap your html with a script tag, everything highlights. Because html inside of an untyped script tag doesn't play nice with Visual Studio, I gave it a type of prism-html-markup.

<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>

Hope this helps!

Answer 3

The class="language-*" needs to go on the <code> element, not the <pre> element. I was making this mistake at first, too.

Updated with correct info

It appears the JS Fiddle doesn't like Prism. Working fine on CodePen and locally on my machine: http://codepen.io/anon/pen/xmwji. Prism uses Regex to identify the sections to highlight. Make sure you escape your code properly. Opening tags (the < symbol) should be written as <, and closing tags (the > symbol) as >.

Answer 4

Add extra 'xmp' tags between 'code' and put your html code inside 'xmp' tags. Worked for me.

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