JSFiddle - React, Tailwind, and code Playground

by Anov Siradj

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/monokai.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<pre is="pre-hljs" data-lang="sh">echo 1;</pre>

JavaScript

(function () {
	function init(element) {
		if(element.dataset.lang) element.classList.add(element.dataset.lang);
		hljs.highlightBlock(element);
	}
	window.CustomPreHLJSElement = document.registerElement('pre-hljs', {
		extends: 'pre',
		prototype: Object.create(
			HTMLPreElement.prototype, {
				attachedCallback: { value: function() { init(this); } },
			}
		),
	});
})();