HLJS 11.11.1 (canonical)

by ajoshguy

HTML

<!--
HOW TO USE THIS:

- Edit version and language on lines 9/10
- Paste in your code block on lines 19-25
-->

<script>
var version= "11.11.1";
var language = "python-repl";
// var language = null; // uncomment to use auto-detect instead
</script>

<div id="warning" style="display:none"></div>

<pre>
<h3 id="lang">If you see this, that no good.</h3>
<!-- your code goes inside this code block -->
<code>
>>> print("hi")
Traceback (most recent call last):
File "<\pyshell#0\>", line 1, in <\module\>
Print("hi")
NameError: name 'Print' is not defined
>>> print("hi")
hi
>>> 
</code>
<!-- end code block -->
</pre>


<!-- version 10.2.1 assets -->
<link 
  rel="stylesheet" 
  type="text/css" 
  href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.1.0/build/styles/base16/darcula.min.css">


<script>
window.addEventListener("load", function() {
  boot(language,version);
});
</script>

CSS

h3 {
  margin:0;
}
#warning {
  background:orange;
  padding:10px;
}

JavaScript

function addLanguage() {
  document.querySelectorAll("pre h3").forEach((el) => {
    var lang = el.parentNode.querySelector("code").result.language;
    el.innerHTML = `Highlighted as: ${lang} (using ${hljs.versionString})`;
  })
}

function doHighlight() {
  hljs.highlightAll();
  addLanguage();
}

function loadLanguage(language) {

  if (language) {
    let code = document.querySelector("pre code")
    code.classList.add(`lang-${language}`);
  } else {
  	console.log("autodetect with :common language subset")
    doHighlight()
    return;
  }

  if (hljs.getLanguage(language)) {
     console.log("Already have language.")
     doHighlight()
     return;
  }

  let script = document.createElement( 'script' );
	script.type = 'text/javascript';
  script.src = `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/${version}/languages/${language}.min.js`; 
  
  script.addEventListener("load", () => {
		console.log("language loaded");
		doHighlight();
	});
  script.addEventListener("error", () => {
    console.log("bad mojo")
  });
  document.querySelector("head").appendChild(script);
}

function boot(language,version) {
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/${version}/highlight.min.js`;
console.log(script.src)

document.querySelector("code").className = language;

script.addEventListener("load", () => {
console.log("loaded");
loadLanguage(language);
/* hljs.initHighlighting() */;
//addLanguage();
})
script.addEventListener("error", () => {
console.log("error");
hljs.highlightAll();
warning.style.display="";
warning.innerHTML=`Language module ${language} could not be loaded.`;
addLanguage();
})
document.querySelector("head").appendChild(script);

/* console.log(document.querySelector("head")) */
/* console.log(script) */
}