Adding Prism syntax highlighting to a Harp server
Table of Contents
This website 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.
Downloading Prism #
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.
Installing Prism #
main.lessfile that Harp converts to CSS and a
\_layout.jadefile the Harp converts to HTML. However, the same idea applies if you’re using something like a
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.lessfile 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.cssfile extension to
prism.lesssolved the problem for me though.
Finally, add the line
\_layout.jadeheader block, or
Using Prism #
- 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!