How to Add Code Syntax Highlighting in Blogger

Haider Aftab June 04, 2023

 

How to Add Code Syntax Highlighting in Blogger

You might frequently need to provide code snippets in your blog posts if you're a blogger or developer. Applying syntax highlighting will improve your code's readability and aesthetic appeal. In this tutorial, we'll look at how to use the well-known Highlight.js tool to add code syntax highlighting to Blogger.

Step 1: Getting the HTML for the theme:

Go to the "Theme" section of Blogger after logging in.

To access your Blogger theme's HTML code, click "Edit HTML."

Step 2: Adding the Highlight.js Library:

In the HTML code, look for the <head> section. Add the following code right before the< /head> tag if it isn't already there:

<link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js'></script>
<script>hljs.initHighlightingOnLoad();</script>

Step 3: Creating a Blog Post:

Go to the Blogger post where you wish to show syntax-highlighted code snippets.
For that specific post, switch to HTML editor mode.

Step 4: Highlighting Syntax in Code Snippets

Include your code between the pre> and code> tags.
By including a class attribute that contains the language name, you can specify the language for syntax highlighting. For instance, use the tag code class="language-csharp"> to highlight C# code.
Example:

<pre><code class="language-csharp">
// Your C# code here
public class HelloWorld {
    public static void Main() {
        Console.WriteLine("Hello, World!");
    }
}
</code></pre>

Here is a list of some commonly used classes for syntax highlighting in Highlight.js:
C: language-c
C++: language-cpp
Java: language-java
JavaScript: language-javascript
Python: language-python
HTML: language-html
CSS: language-css
PHP: language-php
Ruby: language-ruby
Swift: language-swift
Go: language-go
TypeScript: language-typescript
Kotlin: language-kotlin
Rust: language-rust
Scala: language-scala
Shell/Bash: language-bash
SQL: language-sql
JSON: language-json
XML: language-xml
Markdown: language-markdown

In conclusion:

Adding code syntax highlighting to your Blogger blog articles is straightforward if you just follow these simple instructions. In addition to making your code snippets easier to understand, syntax highlighting gives your blog a more polished appearance. Try it out and observe the impact it has on how your code looks!
Once you've included the code snippets with syntax highlighting to your post, don't forget to save or publish it.
I'm done now! You can make your code snippets stand out in your Blogger blog articles by using the Highlight.js package and following a few easy steps. Have fun writing!
Note: By investigating the numerous themes and options offered by the Highlight.js package, you can further personalize the code highlighting appearance.

Post a Comment

0 Comments