How to Implement Syntax Highlighter in Blogger Articles

I am a self-taught programming enthusiast. I don't actually know much about programming language but I do know that sharing source code snippet in Blogger can be quite messy. By default, you can use the "Format as code" feature in the text editor but that doesn't provide you with syntax highlighter.

Reading an article about coding without syntax highlighter can be confusing. The highlighter can help visitors to separate the code from the over all article paragraphs. Advanced syntax highlighters will also highlight part of your code in multiple colors and different fonts. That way visitors will be able to read and understand the code easily.

Read also: How to Use Google Question Hub for Blogger to Create Original Articles

How to Create Simple Syntax Highlighter for Blogpsot Using CSS

Some custom Bloggers themes come with built-in syntax highlighter. If your blog is not equipped with the feature, you can create a simple code highlighter for Blogspot using CSS. Follow the following steps to implement the simple code highlighter:

• Go to your Blogger Theme and click Customize to access Blogger Theme Designer
• Then choose Advanced > Add CSS
• Copy the following code and click Apply to Blog

.post-body pre{
background-color:#eee;
color:#444;
font-size:13px;
line-height:1.75em;
padding:10px 15px;
border-left:3px solid ;
}

The CSS code above will highlight your code snippet within your article when you use the "Format as code" in the text editor. You can tidy up your code spacing after you use the feature. It will look like the one that I am currently using in this blog. It's very simple but it only highlight over all code. 

Unfortunately the Format as code button can no longer be found. You can sandwich your code using <pre> and <code> tags manually. Read further to understand these HTML tags.

Advanced Syntax Highlighter Using Third-party JavaScript

You can also implement a more advanced syntax highlighter using JavaScript. It can highlight your code in multiple colors and fonts depending on the programming language the code is written in. It provides contrast between plain texts, tags, variables or links within your code.

For a Blogger website which is dedicated to share code snippet, advanced syntax highlighter will be necessary. I personally don't use this because I don't share code that much and the simple CSS is sufficient.

Please note that if you have already implemented the simple CSS highlighter, you need to remove it first to avoid conflicting code.

In order to enable a third-party Javacript syntax highlighter, you need to add HTML/JavaScript gadget from your layout. You don't need to name the gadget so that it won't be visible from your blog front end.

Then, you need to choose a third-party syntax highlighter provider. The one I am familiar with is from https://highlightjs.org/usage. I believe it is quite trustworthy because the code is also available in cdnjs.com, a reputable script library. You will be able to find the following code:

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

You put the code in the HTML/JavaScript gadget and click "Save".

In order to use the highlighter, you need to wrap your code within <code> tag. Basically, once you have finished writing your code in the text editor, you need to use the "Format as code". Then go to the HTML view and sandwich your code that you have written in between <code> and </code>.

It should look like the following snippet:

<div>
<pre>
    <code>
    your full code
    </code>
</pre>
</div>

For your information, the <pre> tag appears when you use the "Format as code" function. It allows you to tidy up and prettify your code formatting.

Syntax Highlighter for Blogger is Simple

There are many ways in order to implement syntax highlighter in Blogger. If you are familiar with advanced CSS coding and JavaScript, you can create your own highlighters.

Editing Blogger code is something that everyone can learn. It's practical and not that complicated. Now you will be able to share your source code snippet professionally in Blogger using syntax highlighter!

Please leave a comment below if you find any difficulties or if the code doesn't work! Read also: Optimizing Blogger Robot Header Tags to Increase Google Search Ranking