Xarcell Xarcell - 7 months ago 67
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;.