How To add Syntax highlighter in Blogger | Decorate Your Codes

Syntax Highlighter is the technology Which can decorate your code’s preview. If use javascript + CSS library to do this.
If you are a coder who wants to serve code to his audience through blogger than syntax highlighter is a must have plugin for you.
Adding code is the blogger isn’t always easy. I also Triet many techniques but none of them works fine. Some of them are using textarea, parsed code inside a div and pre.
Don’t worry Syntax highlighter will fix all your problem regarding code decoration.
Let’s start this guide.

decorate your code inside blogger post

Decorate Code inside blogger post

If you’re using blogger for a time you probably know that it is impossible to paste the code as it inside blogger post. Because browser runs that code my assuming as HTML. So, You’ve to parse it first.
Follow below Step to Add Syntax Highlighter into blogger template:
Step 1 – Go to Blogger Dashboard > Theme > Edit HTML and find </body> tag.
Step 2 – Paste Below Code Just Above your closing body Tag

<link defer='' href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css' rel='stylesheet'/>
<script defer='' src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'></script>
<script>
window.addEventListener('DOMContentLoaded', function() {
hljs.initHighlightingOnLoad();});</script>

(All Done! save template)
Step 3– Now use below code inside Your Template wherever you want to show your code.

<pre><code class='html'>

Your Code Here

</code></pre>

Options Change ‘html’ with ‘js’ if you want to show javascript code and ‘css’ if you want to show css code.
here all available language option of syntax highlighter.

Conclusion

Now Its your term to add syntax highlighter in your blogger and decorate your code. If automatically resize pre according to code length you don’t have to anything after adding above code.
Let me know in the comment if you’ve any doubt and suggestion.

Leave a Reply

Your email address will not be published. Required fields are marked *