Creating Syntax Highlighter Without Javascript in Blogger

Syntax Highlighter is a feature used in programming languages that uses different colors for each word. Syntax Highlighter aims to make programming code easy to read for humans or programmers who write the code.

If you write HTML programming code in Notepad, where Notepad does not have a syntax highlighter feature, and your programming code is very long and you want to find comments you have made, you will not be able to read it easily one by one. Perhaps it can still be overcome with the search feature. This is because the colors are the same between comments in HTML, HTML tag codes, and plain text.

On a website that explains programming language tutorials, not a few use syntax highlight to make the display more attractive and easy to read. To apply syntax highlight, you can install highlight.js, but it turns out that highlight.js is very heavy for blog loading. The solution is to apply CSS to the pre and code tags. But it turns out that by applying CSS alone, the highlighting is not much different from what is in Notepad; only the background and text change.

So how do you make the syntax highlighter look colorful but not slow down blog loading? First, you have to install Visual Studio Code. Next is to open and create a new file with the file format adjusted to the programming language. For example, if it’s JavaScript, the file format must be FILENAME.js, and so on for HTML or XML.

Or you can change it in the bottom left. See the HTML option and change it from there. Just find the name of the programming language you are using.

Now just type the programming code and copy all the necessary code.

Open Blogger and paste the code into the post in writing view. The highlighter display will be as follows:

Then open it in HTML view and remove the background from the pasted code.

And add the code <pre><code>

Now the highlighter will not have a background, as follows:

This lightweight syntax highlighter has been successfully implemented by me using the Linux distro KDE Neon. Please try it on Windows, Mac OS X, or other operating systems. Perhaps with other software like Atom or Sublime. The colors can be adjusted to the theme in Visual Studio Code. Don’t forget to add a CSS background for pre and code if you want a black background.