0

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.

Xaverrrrr
  • 35
  • 8
  • So, I figured out how to do it: The script that imports hljs should be right above the "main" script. In the main script, first you have to call hljs.initHighlightingOnLoad(); and every time you want to refresh, you have to call: hljs.initHighlighting.called = false; hljs.initHighlighting(); – Xaverrrrr Jul 24 '23 at 07:11

0 Answers0