Posted on

Adding syntax highlighting is a must for all tech-related blog and the process of doing this should not be difficult. When it comes to syntax highlighting, there are many options out there in the market. However, I’ve settled down with prism.js since it is lightweight and straightforward.

Besides, CloudFlare is serving through their CDN. Thus it’s a plus point for speed!

Just look at this beauty.

Adding prism.js to blog using cdn

  1. Click on the <> Code Injection button under settings
  2. In the Blog Header section add

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/themes/prism.min.css">
    
  3. In the the Blog Footer section add

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/prism.min.js"></script> 
    

Syntax highlighting using prism.js

Create a new entry with the following:

	```language-markup
	<h1>hello world!</h1>
	```

It should render to the following:

Note that if you are using CloudFlare’s rocket loader, you are advised to ignore the scripts. You can read more here.