If you are a coder and want to share your code to the world using Blogger, you'll notice that it does not come with a syntax highlighter. A syntax highlighter is a plugin/module/script that adds styles to code snippets to make them look presentable to the reader.
There are other websites such as Github's Gist, Plunker, Pastebin and etc that allows you to embed code in your blog. The SEO folks were concerned that strings shown in the embedded tag/frame will not be indexed by Google. They suggested that if you rely on your code to do the SEO talking, its better to paste your code on your blog and have it formatted by a syntax highlighter.
In this post, I'm going to show you how to setup PrismJS within Blogger. We are going to edit the
Template > Edit HTML to add the PrismJS' CSS and JS files hosted from CDNJS.
First, copy the following lines and add them on top of the
</head> tag.
<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/themes/prism.min.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/prism.min.js' type='text/javascript'/>
If you want to have line numbers on your code snippet, include the following lines as well.
<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/plugins/line-numbers/prism-line-numbers.min.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/plugins/line-numbers/prism-line-numbers.min.js' type='text/javascript'/>
It should look like this:
<b:include data='blog' name='google-analytics'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/themes/prism.min.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/prism.min.js' type='text/javascript'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/plugins/line-numbers/prism-line-numbers.min.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/plugins/line-numbers/prism-line-numbers.min.js' type='text/javascript'/>
</head>
To show how to use PrismJS, we're going to use a simple Hello World example written in HTML. First, ensure that the
Post settings > Options > Compose mode is set to
Show HTML literally, otherwise it will screw up the page formatting.
Paste the following code to the editing area, this will escape the strings automatically when composing in HTML mode.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Switch to HTML mode using the button located at the top left of the page. Locate and enclose the escaped strings using the
<pre> and
<code> tags like the one below:
<pre class="language-markup line-numbers"><code><!DOCTYPE html><br />
<html><br />
<head><br />
<link rel="stylesheet" href="style.css"><br />
<script src="script.js"></script><br />
</head><br />
<body><br />
<h1>Hello World!</h1><br />
</body><br />
</html&></code><pre>
It should produce the following output:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
To add syntax highlighting to other languages not supported by the default prism.min.js, head over to CDNJS website and find CDNJS script file for the language that you need. In order to use that script file, you can visit the PrismJS
here to know the naming convention for that language.
If this post helped you to use PrismJS syntax highlighting to your Blogger page, please let me know by posting a comment below.
Now back to coding...
