☰

AtCoder Better Highlighter

highlight.jsを使用してAtCoderの提出コードの表示を置き換えるUserScriptです．

// ==UserScript==
// @name            AtCoder Better Highlighter
// @name:en         AtCoder Better Highlighter
// @namespace       https://shouth.net/
// @version         0.5.4
// @description     highlight.jsを使用してAtCoderの提出コードの表示を置き換えるUserScriptです．
// @description:en  Better syntax highlighting for AtCoder using highlight.js.
// @author          shouth
// @resource        css https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/default.min.css
// @require         https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js
// @include         /^https:\/\/atcoder\.jp\/contests\/[^\/]+\/submissions\/[0-9]+
// @grant           GM_addStyle
// @grant           GM_getResourceText
// ==/UserScript==

(async () => {
    'use strict';
    const getHighlightName = (str) => {
        switch (str) {
            case "Ada2012": return "ada";
            case "Awk": return "awk";
            case "Bash": return "bash";
            case "Brainfuck": return "brainfuck";
            case "C": return "c";
            case "C#": return "csharp";
            case "C++": return "cpp";
            case "C++14": return "cpp";
            case "COBOL - Fixed": return "";
            case "COBOL - Free": return "";
            case "Clojure": return "clojure";
            case "Common Lisp": return "lisp";
            case "Crystal": return "crystal";
            case "Cython": return "python";
            case "D": return "d";
            case "Dart": return "dart";
            case "Dash": return "";
            case "Elixir": return "elixir";
            case "Erlang": return "erlang";
            case "F#": return "fsharp";
            case "Forth": return "";
            case "Fortran": return "fortran";
            case "Go": return "go";
            case "Haskell": return "haskell";
            case "Haxe": return "haxe";
            case "Java": return "java";
            case "JavaScript": return "javascript";
            case "Julia": return "julia";
            case "Kotlin": return "kotlin";
            case "Lua": return "lua";
            case "Nim": return "nimrod";
            case "OCaml": return "ocaml";
            case "Objective-C": return "objectivec";
            case "Octave": return "";
            case "PHP": return "php";
            case "Pascal": return "pascal";
            case "Perl": return "perl";
            case "Prolog": return "prolog";
            case "PyPy2": return "python";
            case "PyPy3": return "python";
            case "Python": return "python";
            case "Racket": return "";
            case "Raku": return "";
            case "Ruby": return "ruby";
            case "Rust": return "rust";
            case "Scala": return "scala";
            case "Scheme": return "scheme";
            case "Sed": return "";
            case "Standard ML": return "sml";
            case "Swift": return "swift";
            case "Text": return "";
            case "TypeScript": return "typescript";
            case "Unlambda": return "";
            case "Vim": return "vim";
            case "Visual Basic": return "vbnet";
            case "Zsh": return "";
            case "bc": return "";
            case "dc": return "";
            default: return "";
        }
    };

    const lang = Array.from(document.querySelectorAll("tr"))
        .find(e => [ "言語", "Languages" ].includes(e.children[0]?.textContent));
    const result = /.+(?= \(.+\))/g.exec(lang?.children[1]?.textContent);
    const name = result ? getHighlightName(result[0]) : "";

    if (!name) return;
    if (!hljs.getLanguage(name)) {
        // const response = await fetch(`https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/languages/${name}.min.js`);
        // eval(await response.text());
        return;
    }

    GM_addStyle(GM_getResourceText("css"));
    const style = document.createElement("style");
    style.textContent = `
    .submission-code {
        padding: 0 !important;
    }

    .line-number {
        padding: 0 10px;
        width: 50px;
        text-align: right;
    }

    .line-number::before {
        opacity: 0.3;
        content: attr(data-line-number);
    }

    .line {
        padding: 0 10px;
    }

    .lines {
        width: 100%;
    }
    `
    document.head.append(style);

    const original = document.querySelector("#for_copy0").textContent;
    const lines = hljs.highlight(name, original, true).value.split("\n");
    const code = lines.map((e, i) => `
    <tr>
        <td class="line-number" data-line-number=${i + 1}></td>
        <td class="line">${e}</td>
    </tr>
    `)
    .join("\n");

    const pre = document.createElement("pre");
    pre.id = "submission-code";
    pre.className = "submission-code";
    pre.innerHTML = `<table class="hljs lines"><tbody>${code}<tbody></table>`

    const sub = document.querySelector("#submission-code");
    sub.parentNode.replaceChild(pre, sub);
})();