Abstract
For my blog, since I write mostly about technology and specifically software development, I needed a syntax highlighter for styling my source code examples.
I first started using SyntaxHighlighter to style source code. SyntaxHighligher works by add a class to a <pre> tag like this:
<pre class=“brush: java”>
This worked well until I started writing my blog posts using Scrivener. With Scrivener, I write in Markdown and Scrivener compiles to HTML for me. The standard HTML to use for source code is a <pre> tag surrounding a <code> tag like this:
<pre><code class=“java”>
Unfortunately, SyntaxHighligher does not support this HTML so it no longer worked for me.
I then started using Highlight.js. This tool has been working well, but its styling is a little too simple. Plus I really wanted to start having line numbers added to my source code examples and Highlight.js does not support this.
It is time for another change. The purpose of this post is demonstrate how to incorporate the PrismJS syntax highlighting tool into Blogger.
Disclaimer
This post is solely informative. Critically think before using any information presented. Learn from it but ultimately make your own decisions at your own risk.
Requirements
I did all of the work for this post using the following major technologies. You may be able to do the same thing with different technologies or versions, but no guarantees.
- Blogger
- Scrivener 3
- PrismJS 1.29
Download PrismJS
Visit the PrismJS download page: https://prismjs.com/download.html. On this page you are able to select the languages and plugins you want to include in your prism download. It is tempting to select everything, but, the reality is you will never use some of the languages listed. It only takes a few minutes to go through the language list and select the ones you use most often.
For PrismJS plugins, my primary reason for switching to PrismJS is the Line Numbers plugin. This is an important feature for me. I want to have line numbers added to my source code examples.
Another important plugin is the Autoloader plugin. If you try to style a language you have not previously included in your download, Autoloader will automatically get the styling for that language for you. This is good for occasional use. I would not rely on it all the time. If you start blogging about a new language regularly, re-download PrismJS with that language selected.
What is also nice about the PrismJS download page is that while you are selecting languages and plugins, the URL in your browser is automatically updated to reflect your selections. This means, once you are done selecting all the options you want, save the URL in your your favorite note-taking software (OneNote). Then all you need to do is click on the URL and you don’t have to go through selecting all your languages and plugins again. Very nice!
These are my selections: https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+bash+http+java+javadoc+javadoclike+json+json5+plsql+python+regex+sql+typescript+yaml&plugins=line-numbers+autoloader
Host Your PrismJS Download on OneDrive
After you have downloaded the Prism JS and CSS files, the next thing you need to figure out is what to do with them. There are a couple options:
- Cut and paste the contents inside your Blogger theme.
- Host the JS and CSS files somewhere and update your Blogger template to use them.
Although option #2 is a bit more complicated, it is the better long-term option in my opinion. Blogger does not allow file uploads, so the files have to be hosted somewhere else. There are a number of different options where to host the files, but I chose to use my Microsoft OneDrive account to do this. I chose OneDrive because I already have an account, I use it all the time, and it is easy to use. Most online file upload system (Google Drive, etc.) allow you to get a read-only, permanent link to a file. That is exactly what we are going to to do.
I’m assuming you already know how to save a file on OneDrive, so I will start from there. Login to OneDrive with a web browser and navigate to the folder where you have the Prism JS and CSS files. As seen in Figure 1, you will need to click three times to generate the embedded code.
- Select one of the files.
- Click the “Embed” option.
- Click the “Generate” button.
Figure 1 - Three Clicks to Generate Embedded Code
Figure 2 shows an embedded code example. You will notice it is an <iframe> tag with a src attribute (and a few others). We will be concentrating on the src attribute.
Figure 2 - The iframe Embedded Code
Let us take a look at the <iframe> tag a little more closely:
<iframe src=“https://onedrive.live.com/embed?cid=0C5144D8101C068D&resid=C5144D8101C068D%2127125&authkey=ADxgzT72UZ6zQQM” width=“98” height=“120” frameborder=“0” scrolling=“no”></iframe>
Extract the bolded URL like this:
https://onedrive.live.com/embed?cid=0C5144D8101C068D&resid=C5144D8101C068D%2127125&authkey=ADxgzT72UZ6zQQM
Then changed embed to download like this:
https://onedrive.live.com/download?cid=0C5144D8101C068D&resid=C5144D8101C068D%2127125&authkey=ADxgzT72UZ6zQQM
You will want to do this for both the JS file and the CSS file. When you are done you will have two URL values that look like this.
JS. https://onedrive.live.com/download?cid=0C5144D8101C068D&resid=C5144D8101C068D%2127124&authkey=AIhs3YZuWx_nl8k
CSS. https://onedrive.live.com/download?cid=0C5144D8101C068D&resid=C5144D8101C068D%2127125&authkey=ADxgzT72UZ6zQQM
These URL values are the direct links to your JS file and the CSS file. Test them by pasting the URL values into a browser. The browser should download the file without redirecting to OneDrive. If it does not download directly, something is not right and you should try again.
Now that we have the direct links to the hosted JS and CSS files, let us look at how we update the Blogger theme.
Blogger Theme Updates
Now that the Prism JS and CSS files are hosted on OneDrive and I have permanent URL values to retrieve them, I now need to update my Blogger theme to use these files. I will need to make two updates to the Blogger theme:
- Include both the JS and CSS files.
- Add the ‘line-numbers’ class to the <body> tag.
Let us take a look at how to do both.
Include both the JS and CSS files
The JS file gets included with a <script> tag and the CS file gets included with a <link> tag. Start by creating both of these tags and drop in the permanent URL values like this:
JS. <script src=‘https://onedrive.live.com/download?cid=0C5144D8101C068D&resid=C5144D8101C068D%2127124&authkey=AIhs3YZuWx_nl8k’ type=‘text/javascript’/>
CSS. <link href=‘https://onedrive.live.com/download?cid=0C5144D8101C068D&resid=C5144D8101C068D%2127125&authkey=ADxgzT72UZ6zQQM’ rel=‘stylesheet’/>
However, your not done yet! Normally this is all you need to do, but Blogger themes have a bit of a quirk. They seem to be saved as XML so the & characters in the URL values are a problem. To successfully save these tags to the Blogger theme, you need to escape the & characters with & like this:
JS. <script src=‘https://onedrive.live.com/download?cid=0C5144D8101C068D&resid=C5144D8101C068D%2127124&authkey=AIhs3YZuWx_nl8k’ type=‘text/javascript’/>
CSS. <link href=‘https://onedrive.live.com/download?cid=0C5144D8101C068D&resid=C5144D8101C068D%2127125&authkey=ADxgzT72UZ6zQQM’ rel=‘stylesheet’/>
These tags are now ready to be used in the Blogger theme.
Add the ‘line-numbers’ class to the <body> tag
Recall that one of the reasons I am switching to Prism is because it was important to me to have line numbers added to my source code examples. This is done by the Prism Line Numbers plugin. To use this plugin, you need to do is add the ‘line-numbers’ class to the <body> tag within the Blogger theme. It looks like this:
<body expr:class=‘"loading line-numbers" + data:blog.mobileClass’>
Now let us get these updates into the Blogger theme.
Updating the Blogger Theme
After you log into your blog, perform the following steps as shown in Figures 3 and 4:
- Click “Theme” on the left
- Click the down-pointing arrow
- Select “Edit HTML”
Figure 3 - Blogger Theme Customization
Figure 4 - Blogger Edit HTML
Your are now looking at the HTML template of your blog’s theme. The Prism <script> and <link> tags you created above need to go somewhere within the opening and closing <head></head> tags so it looks like this:
<head>
<script src=‘https://onedrive.live.com/download?cid=0C5144D8101C068D&resid=C5144D8101C068D%2127124&authkey=AIhs3YZuWx_nl8k’ type=‘text/javascript’/> <link href=‘https://onedrive.live.com/download?cid=0C5144D8101C068D&resid=C5144D8101C068D%2127125&authkey=ADxgzT72UZ6zQQM’ rel=‘stylesheet’/>
</head>
The update to <body> is even easier. Just search the template for “<body” and update it to include the “line-numbers” class.
NOTE An HTML element can have multiple class values. The values are separated by a blank space. So note in the example below the blank space between loading and line-numbers.
<body expr:class=‘"loading line-numbers" + data:blog.mobileClass’>
That’s it! Save the file and you are good to go!
Examples
Let us take a look at a few source code syntax highlighting examples to make sure everything is working OK.
Listing 1 - Java
package org.prism.example;
public static final void main(String [] args) {
System.out.println("Hello world!");
}
Listing 2 - JavaScript
const baseValue = prompt('Enter the base of a triangle: ');
const heightValue = prompt('Enter the height of a triangle: ');
// calculate the area
const areaValue = (baseValue * heightValue) / 2;
console.log(
`The area of the triangle is ${areaValue}`
);
Listing 3 - TypeScript
class Employee {
id: number;
firstName: string;
lastName: string;
constructor(id: number, firstName: string, lastName: string)
{
this.id = id;
this.firstName = firstName;
this.lastName = lastName;
}
getFullName() {
return this.firstName + ' ' + this.lastName;
}
}
// create Employee class object
let employee = new Employee(100, 'Rita', 'Red');
console.log(employee);
console.log(employee.getFullName());
Listing 4 - PL/SQL
DECLARE
name VARCHAR2(50);
BEGIN
name := 'Rita';
DBMS_OUTPUT.PUT_LINE('Hello, ' || name);
END;
FOR i IN 1..10 LOOP
DBMS_OUTPUT.PUT_LINE('i = ' || i);
END LOOP;
Listing 5 - XML
<Catalog>
<CD>
<Title>Empire Burlesque</Title>
<Artist>Bob Dylan</Artist>
<Country>USA</Country>
<Company>Columbia</Company>
<Price>10.90</Price>
<Year>1985</Year>
</CD>
<CD>
<Title>Greatest Hits</Title>
<Artist>Dolly Parton</Artist>
<Country>USA</Country>
<Company>RCA</Company>
<Price>9.90</Price>
<Year>1982</Year>
</CD>
</Catalog>
Listing 6 - HTML
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Listing 7 - JSON
{
"colors": [
{
"color": "red",
"category": "hue",
"type": "primary",
"code": {
"rgba": [255,0,0,1],
"hex": "#FF0"
}
},
{
"color": "blue",
"category": "hue",
"type": "primary",
"code": {
"rgba": [0,0,255,1],
"hex": "#00F"
}
},
{
"color": "yellow",
"category": "hue",
"type": "primary",
"code": {
"rgba": [255,255,0,1],
"hex": "#FF0"
}
},
{
"color": "green",
"category": "hue",
"type": "secondary",
"code": {
"rgba": [0,255,0,1],
"hex": "#0F0"
}
}
]
}
Summary
PrismJS is a nice syntax highlighter for source code examples. Using it with Blogger is a little work, but not too complicated.
Visit the PrismJS download page: https://prismjs.com/download.html and download what you will use most often.
Host the downloaded JS and CSS files on the technology of your choice. My example used OneDrive. You can also use Google Drive, GitLab, AWS, Azure, and I’m sure there are others.
Include the JS and CSS files in the Blogger theme by updating the template:
<head>
<script src=‘https://onedrive.live.com/download?cid=0C5144D8101C068D&resid=C5144D8101C068D%2127124&authkey=AIhs3YZuWx_nl8k’ type=‘text/javascript’/> <link href=‘https://onedrive.live.com/download?cid=0C5144D8101C068D&resid=C5144D8101C068D%2127125&authkey=ADxgzT72UZ6zQQM’ rel=‘stylesheet’/>
</head>
Add the “line-numbers” class to the <body> tag to support the Line Numbers plugin.
<body expr:class=‘"loading line-numbers" + data:blog.mobileClass’>
Save the template change, create a blog with source code examples, and that’s it!
Enjoy!
