Adding syntax highlighting is a must for all tech-related blogs 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
- Click on the <> Code Injection button under the settings
- In the Blog, Header section add
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/themes/prism.min.css">
In the Blog Footer section add
Syntax highlighting using prism.js
Create a new entry with the following:
```language-markup <h1>hello world!</h1> ```
It should render the following:
Note that if you are using CloudFlare’s rocket loader, you are advised to ignore the scripts. You can read more here.