Syntax Highlighter - Beautify source code in Blogger

For my tastes, the source code ought to be colorful.  As the site is about development, I frequently had to enter the source code, however Syntax Highlighter consistently let me down. Although Wordpress provides a ton of plug-in possibilities, since this is Google Blogger, you'll have to build it yourself.

The Syntax Highlighter feature in Google Blogger also offers a variety of choices. The ensuing standards were set up in order to choose one of them. 99% of geeks' tastes can be characterized by this criterion.

So, What kind of SyntaxHighlighters could we use?

The most used Syntax Highlighter is by Alex Gorbatchev. It is old and powerful functions, but... Crucially, I was dissatisfied with having to load a separate Javascript file called a brush for each required language. So I put this aside for now.

1. SHJS was also excluded because separate .js files had to be loaded for each language.

2. Highlight.js supports a wide variety of languages and configuration file formats, automatically recognizes the language, and provides various styles. But decisively, it did not support line numbers. The author argues that the line numbers are messy to look at and that there is a reason to include them when it can be solved with comments, but there is some truth to it. Its size is 42 KB.

3. Code-prettify because it supports most languages in one file and is simple to use. However, when I actually tested it, it doesn't seem to be compatible with Blogger. Its size is 17 KB.

4. Rainbow which is simple composition, but it was a problem because it decisively did not support line numbers. Someone made a patch to support line numbers...but that's annoying. Its size is 28 KB..

All other Syntax Highlighters are excluded because they have external dependencies such as jQuery.

5. Prism also looked pretty good, but it doesn't offer CDN hosting, which is a little inconvenient for Blogger users. Of course, it is good to be able to create sophisticated Javascript according to the language and style used. It also comes with plug-ins such as line numbers and line highlighting.

In conclusion, the choice was highlight.js. It was easy to use and powerful, so there was no other choice. Also, see also Ivan Sagalaev's comparison of Syntax Highlighters.

Let's try with highlight.js

Now let's see how to install highlight.js. You can download highlight.js and install it on your own server, but you can also use one registered on the CDN. Bloggers have no choice but to use what is registered in the CDN. 

There is a little error in the installation method document. If you do not close the link tag, an error occurs when editing and saving the Blogger template. Therefore, the link must be closed at the end.

To apply highlight.js, go to Blogger's "Design" menu, select "Template", click "HTML Edit", and insert three lines of code at the end of the head as shown in the figure below.

CDN js

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>

In the example above, I used the github style, but if you don't like it, you can pick it up here and rename it here. For example, if you want to do it in Googlecode style, you can change it to googlecode.min.css. (I switched to obsidian style later.)

Don't forget add the below css in header: 

.hljs {
    margin: 0px 0px;
    font-size: 80%;
    line-height: 1.3em;
    font-family: 'D2Coding', monospace;
}

When you're done editing, save and exit. This completes the installation.

How to use

Java-like code can be wrapped in pre and code tags in the following way. What was written as "language-java" in the class can be omitted because highlight.js automatically recognizes the language well, but if it does not recognize it well, you can write it like that.

<pre><code class="language-java">
 /* CallingMethodsInSameClass.java
 * illustrates how to call static methods a class
 * from a method in the same class
 */

public class CallingMethodsInSameClass
{
    public static void main(String[] args) {
        printOne();
    }

    public static void printOne() {
        System.out.println("Hello World");
    }
}</code></pre>