それって食えるのか？

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/agate.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script src="https://gist.githack.com/a-kuma3/114172cfc6a78b66c42fe7e6379182b0/raw/811043179755d3929627c44edf735772c9a3fa1c/hljs_akuma3.js"></script>

javascript

window.addEventListener("DOMContentLoaded", function() {
    hljs.configure({
        tabReplace: '    ', // 4 spaces
    });
    
    function create_escaped_textnode(ele) {
        return document.createTextNode(
            ele.innerHTML
                .replace(/^[\r\n]+|[\r\n]$/g, "")
                .replace(/</g, "<")      // single "<" already escaped in innerHTML
                .replace(/>/g, ">")
            );
    }
    function hijs_escape_html(e) {
        if (e.dataset.notEscapeHtml === undefined) {
            var text = create_escaped_textnode(e);
            e.innerHTML = "";
            e.appendChild(text);
        }
        return e;
    }
    function hijs_migrate_syntaxhighlighter(e) {    // pre[class*="brush:"]
        var text = create_escaped_textnode(e);
        e.innerHTML = "";
        var code = document.createElement("code");
        code.appendChild(text);
        e.appendChild(code);
        var m = /brush:\s*(\w+)/.exec(e.className);
        if (m) {
            code.classList.add(m[1]);
        }
        m = /highlight:\s*\[([^\]]+)\]/.exec(e.className);
        if (m) {
            code.dataset.markerLine = m[1];
        }
        /* TODO:
            gutter
            first-line
        */
        return code;
    }
    function hijs_modify_line_number(code, start, marker) {
        var lines = code.textContent.split(/\r\n|\r|\n/).length;
        if (lines > 1) {
            var need_linenumber = start > 0;
            var need_marker = marker && marker.length > 0;
            var line_content = need_linenumber ?
                function(n) { return n + "."; } :
                function(n) { return ""; };
            var marker_map = {};
            if (need_marker) {
                marker.forEach(function(item) {
                    marker_map[item] = true;
                });
            }
            var r = code.parentNode.getBoundingClientRect();
            var marker_style = "width: " + (r.width - 6*2) + "px;";
            var i = need_linenumber ? start : 1;
            var nums = [];
            while (lines--) {
                var n = i++;
                var line = line_content(n);
                if (marker_map[n]) {
                    line = ' ' + line;
                }
                nums.push(line);
            }
            var e = document.createElement("code");
            e.className = "hljs hljs-line-numbers" + (need_linenumber ? "" : " only-marker");
            e.style.float = "left";
            e.style.textAlign = "right";
            e.innerHTML = nums.join("\n");
            code.parentNode.insertBefore(e, code);
        }
    }
    // line number
    function extract_attr(code, attr) {
        var lineNumber = code.dataset.lineNumber;
        if (lineNumber !== undefined) {
            attr.start_line = lineNumber === "" ? 1 : code.dataset.lineNumber;
        }
        var markerLine = code.dataset.markerLine;
        if (markerLine !== undefined) {
            attr.marker_line = markerLine.split(/[,\s]+/).reduce(function(a, i) {
                if (/^\d+$/.test(i)) {
                    a.push(parseInt(i,10));
                }
                return a;
            }, []);
            console.log(attr.marker_line);
        }
        return attr;
        /* TODO:
            check parent node (PRE) ?
        */
    }

    Array.prototype.forEach.call(document.querySelectorAll("pre > code"), function(code) {
        code = hijs_escape_html(code);
        code.parentNode.classList.add("hljs-container");
        hljs.highlightBlock(code);
    });

    // migration for SyntaxHighlighter
    Array.prototype.forEach.call(document.querySelectorAll('pre[class*="brush:"]'), function(code) {
        code = hijs_migrate_syntaxhighlighter(code);
        code.parentNode.classList.add("hljs-container");
        hljs.highlightBlock(code);
    });

    Array.prototype.forEach.call(document.querySelectorAll("pre > code"), function(code) {
        var attr = extract_attr(code, {});
        hijs_modify_line_number(code, attr.start_line, attr.marker_line);
    });
    /* TODO:
        copy code to clipboard
    */
});

CSS

pre.hljs-container {
    white-space: pre;
}
pre > code.hljs {
    font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}
.hljs-line-numbers {
    border-right: 1px solid gray;
    padding-left: 1em;
}
.hljs-line-numbers.only-marker {
    padding-left: 0;
    padding-right: 0;
    border-right: none;
}
.hljs-line-numbers .marker {
    width: 100%;
    position: absolute;
    background-color: rgba(255,255,255,0.4);
    margin: 0 6px;
}

Gist にもアップしてある。
https://gist.github.com/a-kuma3/114172cfc6a78b66c42fe7e6379182b0

data-line-number

行番号を表示する。
属性だけを指定するか、数値を指定。
数値を指定した場合には、その数値から行番号が始まる。

data-marker-line

マーカー行の指定。
カンマ区切りで行番号を指定する。

data-not-escape-html

HTML のエスケープをしない。
script や style を書くと そのまま動いちゃうので、手で HTML のエスケープをしなきゃいけないこともある。
その場合は、data-not-escape-html を指定して、code の中の記述をそのまま使う。

Google Code Prettify

https://github.com/google/code-prettify
http://mae.chab.in/archives/2963
http://blog.s-giken.net/230.html
最初に試したのがこれ。

ちょろっと試してみたんだけど、なんか、うまく動かんかった。
highlight.js の方は素直に動いたので、こちらは見限った。

Prism.js

http://prismjs.com/
https://webtatan.com/blog/wordpress/prismjs
言語をあらかじめ選んでおかなくちゃいけない、というところにひっかかって、試してない。
プラグインは良いよね。

HTML エスケープが必要なら、別にこれじゃなくても、って感じ。 Unescaped Markup というプラグインで HTMLエスケープをしなくてもハイライトの対象にできる。