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.
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.
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