An interesting approach to displaying code snippets in HTML. Who knew you could access HTML comments using JavaScript?
Built with vanilla JavaScript, my favorite flavor!
This version is adapted from my 2008 legacy code. The original HTML and CSS syntax parser (using RegEx) still works. But I never did finish my JavaScript tokenizer. (It's a tough task.) This time, I used an AST (Abstract Syntax Tree) library to help: Esprima.
For JavaScript parsing, I'm using Esprima. But using it is optional. The only loss is syntax highlighting in JavaScript. Syntax highlighting is still available in HTML and CSS (no dependencies). Without Esprima, rendered JavaScript code will print in black text on a white background (light mode) or white text on an off-black background (dark mode).
Include both render-code-in-HTML.css and render-code-in-HTML.js in your project. Link the CSS to your HTML document, import the JS into your main JavaScript file and call renderCode(). In your HTML, add ... ??? attribute to ... ???.
<head>
<link rel="stylesheet" href="render-code-in-HTML.css" />
<script src="https://unpkg.com/esprima@~4.0/dist/esprima.js"></script><!-- optional -->
<script defer type="module" src="main.js"></script>
</head>
<body>
<!--
-->
</body>//main.js
import { renderCode } from "./render-code-in-HTML.js";
renderCode();export { renderCode };function renderCode() {}???