Submit some intresting concepts to us using the button.. Submit Here!

How to Highlight Pre CodeBox in Blogger using highlight.js

In this we will be talking about how to use Highlight.js in our Blogger WebSite to make a Good Looking Highlight Code.
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Hello Friends,

Today We will be talking about how to use Highlight.js in our Blogger WebSite to make a Good Looking Highlight Code.

Attractive CodeBox
How to make Highlight Pre Code Box in Blogger

This will look good when you use pre codes and help you to make attractive design of your Website.

What is Highlight.js

The bare minimum for using highlight.js on a web page is linking to the library along with one of the themes..

This will find and highlight code inside of <pre><code> tags; it tries to detect the language automatically. If automatic detection doesn’t work for you, or you simply prefer to be explicit, you can specify the language manually in the using the class attribute:
<pre><code class="language-html">...</code></pre>

Plaintext Code Blocks

To apply the Highlight.js styling to plaintext without actually highlighting it, use the plaintext language:
<pre><code class="language-plaintext">...</code></pre>

Ignoring a Code Block

To skip highlighting of a code block completely, use the nohighlight class:
<pre><code class="nohighlight">...</code></pre>

Supported Languages

Highlight.js supports over 180 languages in the core library. There are also 3rd party language definitions available to support even more languages. You can find the full list of supported languages in :
Supported Languages
Other methods to Improve your WebSite :
Add a Translate Button Add AutoTabContent Add a Forum Page

Steps to use the Highlight Code JS in your WebSite

Steps to add the Highlight Codes in your WebSite to make Code beautiful and attractive...


Find </body> and paste the below code before </body>
<link href='//' rel='stylesheet'/>
<script src='//'/>
<script type='text/javascript'>
//<![CDATA[ $(document).ready(function() {
  $('pre').each(function(i, block) {


To make Functions Feasible we will be adding JQuery by using the below code just before </body> too if your template doesn't have it.
<script src=''></script>

CSS Style

Add this css before </b:skin>
.post pre span{color:var(--highlight-green)} .post pre span.block{color:#fff;background:var(--highlight-blue)}

How to use Highlight?

Now whenever you have to use the highlight.js in articles then add these codes -
  1. For HTML -
    <pre class='html'><code>
  2. For CSS -
    <pre class='css'><code>
  3. For JavaScript -
    <pre class='js'><code>


In the last I will say that if this post about " How to add Highlight Pre CodeBox in Blogger " is useful for you to make your WebSite attractive...

If you have any suggestion or question then do comment below and we will solve your query ASAP...

Our All Posts Are Protected By DMCA. So Don't Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken.
© AnandNawal | All Rights Reserved  

Some Important FAQ related to Highlight Post

How to use this Highlight with Vue.js

An example of vue-plugin in action:

<div id="app">     <!-- bind to a data property named `code` -->     <highlightjs autodetect :code="code" />     <!-- or literal code works as well -->     <highlightjs language='javascript' code="var x = 5;" />   </div>

How to LightLoad this in Node.js ?

You can use below code :

 const hljs = require('highlight.js/lib/core'); hljs.registerLanguage('xml', require('highlight.js/lib/languages/xml'));  const highlightedCode = hljs.highlight('>span<Hello World!</span>', {language: 'xml'}).value 

What are the Requirements in NPM & Node.js?

Highlight.js works on all modern browsers and currently supported Node.js versions. You'll need the following software to contribute to the core library: Node.js ≥ 12.x npm ≥ 6.x

Some common Libraries for this Highlight JS?

<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></script>
<link rel="stylesheet" href=""<
<script src="">
<script src=""></script>

About the Author

Hi, I am Anand Nawal and my motive is to give you the best guide over your Query☺️

تعليق واحد

  1. Nice thanks!
Cookie Consent
We have to use your Cookies to store your Browser Info to serve you Better Experience and make WebSite Fast..
Your Internet Connection is weakened. Please try Refreshing your Browser or Check your Internet Connection...
AdBlock Detected!
We detect that your are using some kind of AdBlocker which we can't allow.
The Revenue we generate with Ads is important for our WebSite to manage funds...
Site is Blocked
Sorry! This site is not available in your country.