Enable Syntax Highlighting with PrismJS
I found the easiest way to add syntax highlighting was with PrismJS, which I discovered because it appears to be prevalent amongst other sites, which is always a good sign. This will be a really quick, barebones example for getting started and implementing PrismJS which you can extend to your needs.
Steps
Configure and Download PrismJS
Go to the PrismJS download page, and select a theme, and then all the languages you wish to support. E.g. my blog has a lot of BASH and PHP code examples, so I'll be sure to tick those. At the bottom, there are a load of plugins which you may also wish to tick. For example the copy to clipboard button, line nubmers, and show language. After having made all your elections, scroll down and click the massive buttons for downloading the javascript and CSS files.
Build Basic Site
Below is a very stripped down implementation of PrismJS just to show you the main parts you need without anything getting in the way.
Create a folder and put the content of the code below in a file called index.html.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- load prism css and js -->
<link rel="stylesheet" href="prism.css" type="text/css">
<script src="prism.js" async defer ></script>
</head>
<body>
<pre>
<code class="language-php">
function sayHello(string $name)
{
print "Hello $name";
}
sayHello("world");
</code>
</pre>
</body>
</html>
Then put the CSS and JS files you downloaded in the folder before double clicking the index.html file to open it in your browser. You should see something similar to below (depending on the theme, languages, and plugins you chose earlier):
Wow That's Ugly!
It may look ugly as heck, but this tutorial was just to get you started with it working. To make it look better, you could:
- Go back to the download page and pick a different theme before downloading the files.
- Pick a theme from the Github themes page which has a larger veriety, some of which are really nice.
- Add your own CSS overrides by adding your own custom stylesheet that gets loaded after the prismjs one.
What If My Code Snippet Isn't for PHP?
The key thing to notice from the code example is that I specified language-php in the line <code class="language-php">. This makes sure that the code snippet is highlighted appropriately for PHP.
Just change the php part of language-php to the language you wish to highlight for.
Extra - If you are using Markdown Parser
If you are using the michelf/php-markdown parser like I have, you don't have to worry that you use ``` blocks for writting code snippets instead of writing bare-html <pre> tags.
It works surprisingly well with Prism and all you have to do is specify the class (e.g. language-php on the first line, in-line like so.
```language-php
function sayHello(string $name)
{
print "Hello $name";
}
sayHello("world");
```
Conclusion
Hopefully that's enough to get you started and you can now go crazy with customizing your code snippets to look way more awesome!
First published: 16th August 2018
