So, I am writing a Figma plugin, that generates the code of a Figma-Component, and then outputs it inside the Figma Plugin Window. To improve the visuals, I'd like to add syntax-highlighting. Here is a simplified version of my program.
<DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/monokai.min.css" />
</head>
<body>
<!--Unimportant stuff-->
<div>
<pre><code id="snippet" class="language-html"></code></pre>
</div>
</body>
</html>
<script>
onmessage = (event) => {
let code = "hello world"; //Just a placeholder; in real program it's html code
let snippet = document.querySelector("#snippet");
snippet.textContent = code;
//I am using textContent, because it didn't work with innerHTML when you plug in HTML-code
//So far the program works fine.
hljs.highlightAll()
//this is where the problems arise...
}
</script>
</DOCTYPE>
I tried multiple hljs commands (highlightElement, highlightAll, ...), and either I get an error "hljs is undefined" or it just doesn't do anything.