Accessing the document object

Hi all, I’m trying to create the option to have highlighted code in my card and it’s proving trickier than expected.

Here is my template so far…

{{Question}}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/night-owl.min.css">
</head>
<body>
	<pre class="spacing"><code id="content" class="code">{{Code}}</code></pre>

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

<script>
hljs.addPlugin({ 
  "before:highlightElement": ({ el }) => { el.textContent = el.innerText } });

	// hljs.configure({tabReplace: '    '});
	hljs.highlightAll();

//	document.body.addEventListener("DOMContentLoaded", () => {
		const codeBlock = document.getElementById("content").innerHTML;

		function tab() {
			console.log(codeBlock)
			const modBlock = codeBlock.replace(/\t/g, "    ")
			console.log('modded bébé', modBlock)
			codeBlock.innerHTML = modBlock;
		};

		tab()
// })

</script>

</body>
</html>

{{type:Answer}}

I imagine I need to wait until the relevant dom elements have been loaded in before calling the tab() function, but whenever I try to place the code in the DOMContentLoaded event, the code doesn’t fire.

Btw what is the code language in the template? I’ve never seen {{template_name}} in straight up html…

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.