How To Add Syntax Highlighter To Blogger/Blogspot

Syntax Highlighter is a script that can make code colorful. We often see this colorful code snippet on blogs that contain tutorial content or share blogger tips, including CSS, HTML, JavaScript, jQuery, etc.

This script is often used to add a little color to the lines of code in blog posts, the use of Syntax Highlighter is also to make it easier for readers to recognize the type of code the author provides.

Another effect of using Syntax Highlighter is that visitors will feel more comfortable reading the content of the blog, and for the author or blog administrator, it will help them more professional in presenting the article.

Syntax Highlighter works almost like Blockquote, but the difference is that the lowercase color blockquote feature has only one color, to change the color you have to add the color yourself. So it can be said that Syntax Highlighter will be more efficient than blockquote feature.

Note: If you haven't added the JQuery library yet, add it, otherwise it won't work. Let's add the JQuery library: <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>

Step 1: Log in to Blogger.

Step 2: On the Blogger dashboard, Select Themes ➺. Edit HTML.

Step 3: Find the </head> tag and paste the below CSS above it.

Step 4: After adding the CSS, find the </body> tag and paste the JavaScript below above it.

To use, please post as usual, but leave a blank space to paste the code. After you're done writing, switch to HTML View and paste it in that space, then go back to Compose mode and paste the code you need to add.

That's it, so I showed you how to add Syntax Highlighter to Blogger, it's very simple. If you have any problem, please comment below to let me know.

Thanks for Visit ❤️