Auto highlight.js

Enable Highlighting

function Shape2D(){
this.name = 'Shape 2D';
}
Copy

Disable Highlighting

function Triangle(base,height){
  this.name = 'Triangle';
  this.base = base;
  this.height = height;
  this.getArea = function(){return this.base*this.height/2;};
}
Copy

without data-highlight attribute

CREATE USER 'dimaslanjaka'@'%' IDENTIFIED VIA mysql_native_password USING '***';
GRANT ALL PRIVILEGES ON *.* TO 'dimaslanjaka'@'%' REQUIRE NONE WITH GRANT OPTION
MAX_QUERIES_PER_HOUR 0 MAX_CONNECTIONS_PER_HOUR 0 MAX_UPDATES_PER_HOUR 0 MAX_USER_CONNECTIONS 0;
GRANT ALL PRIVILEGES ON `dimaslanjaka\_%`.* TO 'dimaslanjaka'@'%';
            Copy

function Shape(){
  // this is a comment
  this.name = 'Shape';
  this.toString = function(){return this.name;};
}
Copy

Full codes

CSS

@import url('//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.16.2/build/styles/default.min.css');
Copy

JS

// init highlight.js after page loaded
document.addEventListener('DOMContentLoaded', initHljs);

// start highlight pre code
function startHighlighter(block) {
  // validate hljs
  if ('hljs' in window === false) return loadHljs();
  // fix mysql highlight
  if (block.classList.contains('language-mysql')) {
    block.classList.remove('language-mysql');
    block.classList.add('language-sql');
  }
  // start highlight pre code[data-highlight]
  if (block.hasAttribute('data-highlight')) {
    if (block.getAttribute('data-highlight') != 'false') {
      // highlight on data-highlight="true"
      hljs.highlightBlock(block);
    }
  } else {
    // highlight no attribute data-highlight
    hljs.highlightBlock(block);
  }
}

function loadHljs() {
  // validate hljs already imported
  if ('hljs' in window === true) return;
  // otherwise create one
  const scr = document.createElement('script');
  scr.src = '//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js';
  scr.onload = initHljs;
  const referenceNode = document.querySelectorAll('script').item(0);
  referenceNode.parentNode.insertBefore(scr, referenceNode.nextSibling);
  }

  function initHljs() {
  // highlight pre code
  document.querySelectorAll('pre code').forEach(startHighlighter);

  // highlight all pre code elements
  // when use below syntax, please remove above syntax
  /*
  if ("initHighlightingOnLoad" in hljs) {
    hljs.initHighlightingOnLoad();
  } else if ("highlightAll" in hljs) {
    hljs.highlightAll();
  }
  */
}
    Copy

HTML

<pre><code class="language-javascript">
// your codes to print here
</code></pre>
<!-- disable highlight -->
<pre><code class="language-javascript" data-highlight="false">
// your codes to print here
</code></pre>
    Copy

React

This code also works on reactjs see full codes | see implementation usages