How to Add Syntax Highlights in Blogger

Hello guys, welcome to Bytes Vibe! Today I’ll show you how to add syntax highlights in Blogger. If you’re tired of seeing blogger code displayed in just one color, this tutorial is for you. With colored syntax highlighting, blogger codes will look more attractive and easier to read.

How to Add Syntax Highlights in Blogger

By default, Blogger doesn’t support colored syntax highlighting, which means you’ll need to add this functionality manually. Fortunately, it’s not as complicated as it sounds. Let’s dive into the step-by-step process of adding colored syntax highlights in Blogger.

Start by logging into Blogger account. On the left-hand side menu, click on the “Theme” option to access blog’s theme settings.
After selecting “Theme,” click on the “Customize” button, then choose “Edit HTML” to open the HTML editor for your blog.
Find the section </head><!--<head/>--&gt or </head> and paste the following code right above it:

<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js'></script>
<link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css' rel='stylesheet'/>
<!--[ Highlight Js ]-->
<script type='text/javascript'>//<![CDATA[
document.addEventListener('DOMContentLoaded', (event) => {
  const highlight = document.querySelectorAll('pre');
  highlight.forEach((el) => {
    hljs.highlightElement(el);
  });
});
//]]></script>Code language: HTML, XML (xml)

So our work is finished for adding a beautiful code box in blogger site.

To use the Colored Highlight Syntax Code:

Go to this Html parse page
Paste all codes in box and parse them to use it in blogger and than copy all of the parsed codes
Open blogger post in Html View format and paste the following code where you need your blogger codes to be shown.
Paste the parsed blogger codes betweens two code tag.

<pre><code> Your code here </code></pre>Code language: HTML, XML (xml)

This feature automatically detects the Code Language and gives color. Adding colored syntax highlights in Blogger significantly improves the presentation and readability of code. By following the steps guided in this Bytes Vibe tutorial, you can enhance your blog’s appeal and provide your readers with a better experience.

Watch on youtube

Have you tried adding syntax highlights in Blogger posts? Share your experiences or any tips you might have in the comments below. Don’t forget to subscribe to our blog for more Blogger customization tutorials!