Adding Code Syntax Highlighting to your Blogger

Are you looking to add code syntax highlighter to your blog so your code examples look beautiful? Prism.js code syntax highlighter does just that and I'll be covering how to quickly you can add the configuration to your blog below. 

What is Prism.js

"Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in thousands of websites, including some of those you visit daily," prismjs.com.

Themes

Here are some of the themes you can choose. 

Theme: Default

Theme: Tomorrow Night

Theme: Coy

Theme: Solarized Light

Check out the other themes here.

Configure the Syntax Highlighting Features

The easiest way to include it in your blog is by importing the resources from CDN. In this case I'm going to show how to use the cdn.jsdelivr.net CDN repository to import the resources into your blog.

Step 1: Choose the features you want to use.

In this example below I'll use the auto loader to wire up the languages meaning it will download the resources for the languages specified in the class attribute in the PRE or CODE tags. 

- https://www.jsdelivr.com/package/npm/prismjs - Core resources reference

- https://www.jsdelivr.com/package/npm/prismjs?path=plugins - Plugin resources reference

Step 2: Copy these imports to your blog html.

Configure the resources you want to import and the plugins you want to use in your blog. 

<!-- Import the core prism.js resources -->
<link href="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/themes/prism.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/components/prism-core.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/plugins/autoloader/prism-autoloader.min.js"></script>

<!-- Declare the languages path, the components directory -->
<script>Prism.plugins.autoloader.languages_path = 'https://cdn.jsdelivr.net/npm/prismjs@1.20.0/components/'; </script>

<!-- Optional: Import the prism.js plugin: Command Line -->
<link href="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/plugins/command-line/prism-command-line.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/plugins/command-line/prism-command-line.min.js"></script>

Step 3: Normalizing Whitespaces

When adding code to the PRE & CODE tags, you'll probably want to normalize how it looks so you don't have to spend time formatting HTML. Check out the reference material here. 

<!-- Optional: Import the prim.js plugin: Normalize Whitespace -->
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/plugins/normalize-whitespace/prism-normalize-whitespace.min.js"></script>

<script>
Prism.plugins.NormalizeWhitespace.setDefaults({
	'remove-trailing': true,
	'remove-indent': true,
	'left-trim': true,
	'right-trim': true,
    'remove-initial-line-feed': true,    
	/*'break-lines': 80,
    'indent': 2,
	'tabs-to-spaces': 4,
	'spaces-to-tabs': 4*/
});
</script>

Step 4: Copy the resources to your Blogger Theme

I'll cover adding it in Blogger, but adding it to any site is going to be the same. 

1. In your Blogger BlogSpot, go to the layout settings. 
   
2. Once in the layout settings. Click "Add a Gadget" select HTML/Javascript.
3. Add the prism.js imports and Javascript configuration to content area. Don't give it a title. Putting it all together, this is what I add to my blog HTML/JavaScript import. 

   <!-- Import the core prism.js resources -->
   <link href="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/themes/prism.css" rel="stylesheet" />
   <script src="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/components/prism-core.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/plugins/autoloader/prism-autoloader.min.js"></script>
   
   <!-- Declare the languages path, the components directory -->
   <script>Prism.plugins.autoloader.languages_path = 'https://cdn.jsdelivr.net/npm/prismjs@1.20.0/components/'; </script>
   
   <!-- Optional: Import the prism.js plugin: Command Line -->
   <link href="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/plugins/command-line/prism-command-line.css" rel="stylesheet" />
   <script src="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/plugins/command-line/prism-command-line.min.js"></script>
   
   <!-- Optional: Import the prism.js plugin: Normalize Whitespace -->
   <script src="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/plugins/normalize-whitespace/prism-normalize-whitespace.min.js"></script>
   
   <script>
   Prism.plugins.NormalizeWhitespace.setDefaults({
   	'remove-trailing': true,
   	'remove-indent': true,
   	'left-trim': true,
   	'right-trim': true,
       'remove-initial-line-feed': true,    
   	/*'break-lines': 80,
       'indent': 2,
   	'tabs-to-spaces': 4,
   	'spaces-to-tabs': 4*/
   });
   

   
4. Last but not least, save the new content.

 
Usage

Now that you've imported the features, using them are simple. In the blog post go to the html source editor and add <pre class="language-[choose-prism-lang]"><code> // code </code></pre> tags. 

Sharing HTML code

The browser will render tags in the pre/code tags. To work around rendering tags, escape the tags starting and ending characters to html entities. For example a <TAG></TAG> becomes &lt;TAG&gt;&tl;/TAG&gt;.

Starting Character	<	&lt;	&lt;TAG&gt;
Ending Character	>	&gt;	&lt;TAG&gt;

Simple Syntax Highlighting Example

This is a simple example showing how to use the syntax highlighting. In the pre tag, add class="language-[choose-prism-lang]". 

Declare your html like so in the source editor:

<pre class="language-css"><code>
.mydiv { 
    background-color: rgba(120, 01, 18, .48); 
}
</code></pre>

It will render like so when you preview:

.mydiv { 
    background-color: rgba(120, 01, 18, .48); 
}

Share your Configuration

I hope that helped wire your prism.js configuration in your blog. I'd love to see the way you're using prism.js. Could you send me a link in the comments below so I could check out your configuration?