Adding Prism syntax highlighting to a Harp server
Posted on November 30, 2014 • 3 minutes • 490 words
is used to run on a webserver called Harp
. While reading through the documentation page
on using Markdown to write pages, I came across an interesting few lines near the bottom of the page, which discussed how to include fenced code blocks on a page:
The language- class name follows the W3C and WHATWG convention for specifying the type of code. This also allows you to style it with a client-side syntax highlighting library, like Prism .
What this means is that when you include code blocks, you can have Prism highlight the syntax for you just by specifying the language. This mimics the syntax highlighting behaviour of text editors such as SublimeText , and makes code blocks on your website easier to read and understand at a glance.
Installing Prism on a Harp webserver is relatively easy, but we’ll quickly go over the steps to follow.
Navigate over to prismjs.com
After clicking download, you’ll be presented with a list of options to choose from in order to customize your version of Prism. This includes themes, languages Prism will recognize, and even a handful of plugins.
In your main.less file, add the line
@import "path_to_prism.css/prism";to the top of the file.
Note: I had issues with importing into my main.less file a CSS file, and not a less file. Per the lesscss.org documentation , there should no longer be an issue importing a CSS file, and Harp v0.14.0 includes LESS version 1.7.4, however I still had issues. Changing the prism.css file extension to prism.less solved the problem for me though.
Finally, add the line
script(src="/path_to_prism.js/prism.js")to your _layout.jade header block, or
- Now that we’ve installed Prism, whenever we include code blocks such as the following:
<!DOCTYPE html> <html> <head> <title> Example page title </title> </head> <body> <h1> Example header </h1> </body> </html>
Prism can automatically highlight the syntax for us if we add a language class to the code block. In Markdown, this can be simply added by including a language- class right after the three backticks used to open a code-block. For the above code block, we would make sure the line looked like this
```markup, which will be converted to a
language-markup class and render as so:
<!DOCTYPE html> <html> <head> <title>Example page title</title> </head> <body> <h1>Example header</h1> </body> </html>
And that’s all there is to it!