JSFiddle - React, Tailwind, and code Playground

by Oski Krawczyk

HTML

<!-- language list: -->
<!-- highlightjs.org/download -->
<script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>

<!-- color scheme/theme -->
<!-- github.com/catppuccin/highlightjs -->
<link rel="stylesheet" href="https://readme-styling.gitlab.io/showdownjs/hljs-catppuccin-frappe.css">

<pre>
&lt;div class=&quot;example&quot;&gt;
    &lt;a href=&quot;https://images.google.com&quot;&gt;sample link!&lt;/a&gt;
&lt;/div&gt;
</pre>

CSS

pre {
	padding:1rem;
	word-break:break-all;
	white-space:break-spaces;
}

JavaScript

document.addEventListener("DOMContentLoaded", () => {
	hljs.configure({
		languages: ["xml","javascript","css"]
	})
	
	document.querySelectorAll("pre, code")?.forEach(x => {
		hljs.highlightElement(x);
	})
})


/*
HOW TO USE:
highlightjs.readthedocs.io/en/latest/readme.html#in-the-browser

CDN FILES:
cdn.jsdelivr.net/gh/highlightjs/cdn-release@latest/build/
*/