head.html

<!-- Stylesheet -->
<link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github.min.css"
        media="screen and (prefers-color-scheme: light)"
/>
<link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css"
        media="screen and (prefers-color-scheme: dark)"
/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css"/>

<!-- Javascripts -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"></script>

<script>
    var oldDiff = "";

    function updateDiffView() {
        try {
            var diff = document.getElementById('diff-raw').innerHTML;
            if (!diff || diff === oldDiff) {
                return;
            }
            oldDiff = diff;
            var targetElement = document.getElementById('diff-view');
            var configuration = {
                drawFileList: true,
                matching: 'lines',
                highlight: true
            };
            var diff2htmlUi = new Diff2HtmlUI(targetElement, diff, configuration);
            diff2htmlUi.draw();
        } catch (error) {

        }
    }

    setInterval(function () {
        updateDiffView();
    }, 500);
</script>