Using Prism.js with Harp

A few days ago, I needed to set up a very basic site for a JS library I'm working on, and I had heard great things about Harp.js, a static-site generator on steroids. It took me all of 5 minutes using Harp's platform to get a basic template along with boilerplate CSS & JS published and live. Pretty neat.

Everything was great until I decided to use Prism.js for syntax highlighting. This site is for a JS library after all, and I wanted to make the code examples stand out. Prism's installation instructions are easy: pick a theme and any optional plugins, download the CSS/JS for it, stick it in your codebase and you're good to go.

Once that was done, I looked through the Harp docs to see if I could inject Markdown into HTML, and I sure could. Harp is awesome, if I haven't said that already. Harp allows you to set up a .md partial like so:

 ```javascript
 var x = new Colour('#e27a3f');
 ```

and then inject that wherever you'd like. This is great, since I can use whatever templating engine I want for my actual website (ejs, jade, hbs, raw HTML, etc) and still inject properly compiled Markdown into it.

When I ran this, I noticed a small bug - the <pre> tag was not being styled. A little bit of inspecting the compiled code in the browser and looking through Prism's CSS, I realised why.

Compiled code
<pre>
    <code class="language-javascript">some code here</code>
</pre>

But this is what Prism is expecting:

What Prism wants it to look like
<pre class="language-javascript">  
    <code class="language-javascript">some code here</code>
</pre>  

Awesome, now all that needs to be done is modifying the selectors in the CSS so that Prism is styling the code-block correctly.


Modified Prism.css

Get rid of the [class*="language-"] pseudo-selector on the <pre> tags and you're done!

/* Code blocks */
pre {  
    padding: 1em;
    margin: .5em 0;
    overflow: auto;
    border-radius: 0.3em;
}

:not(pre) > code[class*="language-"],
pre {  
    background: #272822;
}
comments powered by Disqus