Highlight.js styles and script, along with additional language scripts, are imported and initialized. The highlight.js plugin and all code in the document are then added and highlighted.

Run example

npm run import -- "highlight js"

highlight js

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.css">


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

<!-- and it's easy to individually load additional languages -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/${LANGUAGE}.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/bash.min.js"></script>
<script src="../../mergehtml.js"></script>

<script>
hljs.addPlugin(mergeHTMLPlugin);
hljs.highlightAll();
</script>

Code Breakdown

Importing Highlight.js Styles and Script

• Two CSS styles are imported:
  • default.min.css: The default highlight.js style.
  • github-dark.css: A dark-themed style inspired by GitHub.
• The highlight.js script is imported.

Loading Additional Languages

• A script is loaded dynamically for a specific language (${LANGUAGE}).
• An example script is loaded for the Bash language.
• A plugin script is loaded (../../mergehtml.js).

Initialization Script

• The addPlugin function of highlight.js is called to add a plugin named mergeHTMLPlugin.
• The highlightAll function is called to highlight all code in the document.