Join our telegram group here. Join Now!

How to auto-highlight syntax on a codebox like a pro?

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated


Welcome to my blog Freeplay!
Today the topic is How to auto-highlight syntax on a codebox like a pro?! Hope this post might be useful to you and please stay tuned to our blog for further updates. Remember the end contains surprises!

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.

This is the easiest tutorial to apply highlight.js.

Step by Step Analysis

First of all, this method, we are going to take help of Highlight.js.
  1. First, use the css before </b:skin>
    /* Highlight */ .hljs .hljs-subst{color:var(--synxC)} .hljs .hljs-comment{color:#656e77} .hljs .hljs-attr, .hljs .hljs-doctag, .hljs .hljs-meta, .hljs .hljs-meta-keyword, .hljs .hljs-section, .hljs .hljs-selector-class{color:#015692} .hljs .hljs-selector-pseudo, .hljs .hljs-keyword{color:#0a8356} .hljs .hljs-selector-tag{color:#167406} .hljs .hljs-attribute{color:#803378} .hljs .hljs-built_in, .hljs .hljs-literal, .hljs .hljs-name, .hljs .hljs-number, .drK .hljs .hljs-number, .hljs .hljs-quote, .hljs .hljs-selector-id, .hljs .hljs-template-tag, .hljs .hljs-title, .hljs .hljs-type{color:#b75501} .hljs .hljs-link, .hljs .hljs-meta-string, .hljs .hljs-regexp, .hljs .hljs-selector-attr, .hljs .hljs-string, .hljs .hljs-symbol, .hljs .hljs-template-variable, .hljs .hljs-variable{color:#54790d} .hljs .hljs-bullet, .hljs .hljs-code{color:#535a60} .hljs .hljs-deletion{color:#c02d2e} .hljs  .hljs-addition { color : #2f6f44 } .hljs  .hljs-emphasis { font-style :italic} .hljs  .hljs-strong { font-weight : 700 } .drK  .hljs { color : var (-- darkT)} .drK  .hljs  .hljs-subst , .drK  .hljs  .hljs-property , .drK  .hljs  .hljs-function { color : #fefefe } .drK  .hljs  .hljs-strong {font-weight:bold} .drK .hljs .hljs-code, .drK .hljs .hljs-emphasis{font-style:italic} .drK .hljs .hljs-tag{color:#62c8f3} .drK .hljs .hljs-name{color:#ff7086} .drK .hljs .hljs-attr{color:#ffb244} .drK .hljs .hljs-variable, .drK .hljs .hljs-template-variable, .drK .hljs .hljs-selector-id, .drK .hljs .hljs-selector-class{color:#ade5fc} .drK .hljs .hljs-string, .drK .hljs .hljs-bullet{color:#a2fca2} .drK .hljs .hljs-type, .drK .hljs .hljs-title, .hljs .hljs-section, .drK .hljs .hljs-attribute, .drK .hljs .hljs-quote, .drK .hljs .hljs-built_in, .drK .hljs .hljs-builtin-name{color:#ffa} .hljs .hljs-number, .drK .hljs .hljs-symbol, .drK .hljs .hljs-bullet{color:#d36363} .drK .hljs .hljs-keyword, .drK .hljs .hljs-literal{color:#fcc28c} .drK .hljs .hljs-selector-pseudo{color:#fbc796} .drK .hljs .hljs-selector-tag{ color : #fbb46e } .drK  .hljs  .hljs-comment , .drK  .hljs  .hljs-deletion , .drK  .hljs  .hljs-code { color : #888 } .hljs  .hljs-regexp , .drK  .hljs  . hljs-regexp , .drK  .hljs  .hljs-link { color : #c6b4f0 } .drK  .hljs  .hljs-meta { color : #fc9b9b } .drK  .hljs  .hljs-deletion {background-color:#fc9b9b;color:#333} .drK .hljs .hljs-addition{background-color:#a2fca2;color:#333}  
  2. Then use the following code before </head>
     <b:if cond='data:view.isSingleItem'>
       <script async='async' src=''/>
       <script>/*<![CDATA[*/ Defer(function() {
        var aCodes = document.getElementsByTagName('pre');
        for (var i=0; i < aCodes.length; i++) {hljs.highlightElement(aCodes[i]);}}) /*]]>*/</script>
This method works quite good in JagoDesain themes. It isn't tested in other theme.

Syntax for making a codebox

 <div class='pre'><pre>................ your parsed code here........ </pre></div> 
For parsing codes, it is advisable to use our HTML Parser.

View Demo


I expressed my views on the topic 'How to auto-highlight syntax on a codebox like a pro?'. Hope you are furnished my opinion. The post mustn't be copied without prior permission by emailing or telegram.


About the Author

Hey, I am Soumyabrata Mukherjee! I am a student, professional blogger as well as an UI designer from Dhanbad, Jharkhand. My blogs are Freeplay and Freewit. You can hire me in business to improve its working and management.

1 comment

  1. bellow blogger theme
    Check This
Comments are moderated. To avoid SPAM comments, we are doing so.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.