highlight.js tradtional script

 <link

  rel="stylesheet"

  href="./highlight/styles/default.min.css"

/>

<link

  rel="stylesheet"

  href="./highlight/styles/github-dark.min.css"

/>

<script src="./highlight/highlight.min.js"></script>

<!-- and it's easy to individually load additional languages -->

<script src="./highlight/languages/javascript.min.js"></script>

<pre><code class="language-javascript">

function helloWorld() {

  console.log('Hello, world!');

}

</code></pre>

<script>

document.addEventListener('DOMContentLoaded', (event) => {

  document.querySelectorAll('pre code').forEach((block) => {

    hljs.highlightElement(block);

  });

});

</script>