This article will explore how to add code snippets in website posts. One powerful tool for this is Highlight.js, a JavaScript library that adds syntax highlighting to code snippets.
What is Highlight.js?
Highlight.js is a JavaScript library that automatically detects and highlights code snippets in various programming languages. It supports a wide range of languages, from popular ones like JavaScript and Python to more niche languages like Swift and Rust.
link: https://highlightjs.org/
Getting Started
The following three steps explain how to add a code block to a Blogger website; however, the same procedure can be used on any platform.
Step 1: Add the Highlight.js Files
To get started, you'll need to include Highlight.js CSS and JavaScript files in your Blogger website's theme. You can do this by copying the below CDN links and pasting them into the <head> section of your theme's HTML code.
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css" rel="stylesheet"></link>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
Step 2: Initialize the Highlight.js Library
After adding the required CDN, you'll need to initialize the Highlight.js library on your website page where you want to add the code snippet. This is done by adding a script tag having JavaScript function call at the end of your page's HTML just before the closing </body> tag, which will automatically apply the syntax highlighting to your code blocks. Thus add below of script tag just before the closing </body> tag:
<script>hljs.highlightAll();</script>
Step 3: Format Your Code Blocks
With the Highlight.js library set up, you can now start formatting your code blocks in your Blogger posts. Wrap your code snippets inside '<pre><code>' tags, and Highlight.js will automatically detect the programming language and apply the appropriate syntax highlighting. For example, to highlight a JavaScript code snippet, you would use:
<pre><code>
// Your JavaScript code here
console.log("Hello, world!");
</code></pre>
Advanced Features
Handling html code Blocks
When displaying html code in your Blogger posts, you may encounter issues where the html tags are rendered as part of the content instead of being displayed as code. To overcome this, you can use html entities to properly encode your html code blocks, to ensure that they are displayed correctly with Highlight.js. This could be done using any code encoder, one of which is as below:
https://mothereff.in/html-entities
Now, place the encoded code between <pre><code> tags, and the HTML code will be displayed correctly.
Adding Line Numbers
If you want to include line numbers alongside your code snippets, you can use the Highlight.js Line numbers plugin. This plugin allows you to display line numbers for your code blocks, further enhancing the readability for your readers.
Conclusion
Thus by using Highlight.js into your website, you can transform your code snippets into visually appealing, easy-to-read blocks that enhance the overall user experience for your readers.
0 Comments