templates/source.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{title}} annotated source</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>
    <main>
        <div class="line">
            <div class="doc">
                <h1>{{title}} <span class="fade">annotated source</span></h1>
                <em><a class="back" href="./">Back to index</a></em>
            </div>
            <pre></pre>
        </div>
        {{lines}}
    </main>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/github-gist.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
    <script>
        for (const el of document.querySelectorAll('.line pre')) {
            hljs.highlightBlock(el);
        }
    </script>
</body>

</html>