Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Markup Not Showing Up Using Prism JS

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 look like this:

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

I have included the prismjs file before the </head> tag.

The CSS works, there are no errors in my Chrome console, yet the script shows no markup.

I have a jsFiddle with the exact same code on my site, and it also doesn't show the line numbers, even though my site does. http://jsfiddle.net/fyqnz/

Site example: http://www.xarpixels.com/2013/05/bloggers-conditional-statements-legacy.html

Any idea why this isn't working?

like image 770
Xarcell Avatar asked Aug 22 '13 21:08

Xarcell


2 Answers

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!

like image 195
Chris B Avatar answered Oct 01 '22 20:10

Chris B


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 &lt;, and closing tags (the > symbol) as &gt;.

like image 42
Chris Ferdinandi Avatar answered Oct 01 '22 20:10

Chris Ferdinandi