This content originally appeared on DEV Community and was authored by Haider Aftab
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
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.
**
Read more Here!!!
**
This content originally appeared on DEV Community and was authored by Haider Aftab
Haider Aftab | Sciencx (2023-06-04T15:48:07+00:00) How to Add Code Syntax Highlighting in Blogger. Retrieved from https://www.scien.cx/2023/06/04/how-to-add-code-syntax-highlighting-in-blogger/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.