Add a syntax highlighting library to Panel and to Site

A sample from ChatGPT

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pretty Print JSON with Highlight.js</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github-dark.min.css"
    />
  </head>
  <body>
    <div id="jsonDisplay" class="json-output">
      <pre><code class="json"></code></pre>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/json.min.js"></script>
    <script>
      // Sample JSON object
      const jsonObject = {
        name: "John Doe",
        age: 30,
        city: "New York",
        languages: ["English", "Spanish"],
        active: true,
        status: null,
      };

      // Convert JSON to formatted string and display it
      const jsonDisplay = document.querySelector("#jsonDisplay code");
      jsonDisplay.textContent = JSON.stringify(jsonObject, null, 4);

      // Initialize syntax highlighting
      hljs.highlightElement(jsonDisplay);
    </script>
  </body>
</html>

HolismHolding / Issues

Add a syntax highlighting library to Panel and to Site #254