How to Make Syntax Highlights Similar to Github Code on Blogger. How to Install Syntax Highlight on Blogger. Peak fiction blogger tips and tricks.

Enhance Your Blogger Code Tutorials with GitHub-Style Syntax Highlighting

How to Make Syntax Highlights Similar to Github Code on Blogger

Introduction

Programming tutorials often involve sharing snippets of code, and presenting them in an organized and visually appealing way can significantly improve the learning experience for readers. One effective technique is syntax highlighting, which adds color and style to code snippets, making them easier to understand. In this article, we'll explore how to implement syntax highlighting similar to GitHub's code display on your Blogger platform.

What is Syntax Highlighting?

Syntax highlighting is a powerful feature that enhances the presentation of markup or programming source code by applying color and font styles based on the programming language being used, such as JavaScript, CSS, HTML, Python, and more. This technique mirrors the appearance of code in popular programming text editors like Notepad++, Atom, and Sublime Text.

How to Install Syntax Highlight on Blogger

To implement syntax highlighting on your Blogger site, follow these steps:

  1. Open Blogger > Theme > Edit HTML.
Copy and paste the following code snippet right above the </head> or </body> code in template. 
<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>
In this example, we use the GitHub Dark style for syntax highlighting. Feel free to customize the colors by referring to the Highlight JS demo and replacing the CSS link accordingly.

How to Use Syntax Highlight on Blogger

After installing syntax highlighting, follow these steps to use it in your blog posts:

  1. Use the following HTML code wrapper in the html mode of the Blogger post editor:
<pre><code> ... </code></pre>

If displaying JavaScript or HTML code, ensure that the code is parsed using an HTML parse tool before inserting it into the wrapping tag.

Conclusion

Incorporating GitHub-style syntax highlighting into your Blogger tutorials can greatly enhance the readability of your code snippets. Follow the easy installation steps and use the provided code wrappers to make your programming tutorials more visually appealing and user-friendly. Share this article with your friends who might find it useful for their Blogger coding adventures. Happy coding!