Xarcell Xarcell - 27 days ago 9
CSS Question

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?

Answer

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