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.
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
and tags manually. Read further to understand these HTML tags.
