How to Highlight Pre CodeBox in Blogger using highlight.js

Hello Friends,

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

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...

JavaScript 

Find </body> and paste the below code before </body>

<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-dark.min.css' rel='stylesheet'/>

<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/>

<script type='text/javascript'>

//<![CDATA[
$(document).ready(function() {
  $('pre').each(function(i, block) {
    hljs.highlightBlock(block);
  });

});

//]]>

</script>

JQuery

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='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></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>
    Your_code_here
   </code></pre>

2. For CSS -
   

   <pre class='css'><code>
    Your_code_here
   </code></pre>

3. For JavaScript -
   

   <pre class='js'><code>
    Your_code_here
   </code></pre>

Conclusion

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="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/languages/go.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/styles/default.min.css"<
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/highlight.min.js">
</script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/languages/go.min.js"></script>

Go to Link