☰

AtCoder Better Highlighter

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

作者
shouth
日安装量
0
总安装量
546
评分
0 0 0
版本
0.5.4
创建于
2020-10-10
更新于
2020-12-19
大小
4.9 KB
许可证
暂无
适用于

2022/10/9 追記
このスクリプトは今後更新されることはありません
代替としてChppppp氏作成のAtCoder Comfortable Editorをオススメします
追記終了

AtCoder Better Highlighter

highlight.jsを用いて提出結果画面のコードをハイライトするスクリプトです． https://gist.github.com/shouth/1d40c814231ad712725b97eeb78c62ab

デフォルトでサポートしている言語

  • Bash
  • C
  • C++
  • C#
  • Go.
  • Java
  • JavaScript
  • Kotlin
  • Objective-C
  • PHP
  • Perl
  • Python
  • Ruby
  • Rust
  • Swift
  • TypeScript

他の言語をハイライトする

まずこのスクリプトの編集画面を開きましょう．

方法1: 依存ライブラリを追加する

使用する言語のhighlight.jsのプラグインのURLをhttps://cdnjs.com/libraries/highlight.jsからコピーしましょう．
コピーしたらスクリプトの上部あたりから次の行を見つけましょう．

// @require https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js

上のコードの次の行に以下のコードを追記しましょう．{コピーしたURL}を先ほどコピーしたURLで置き換えるのを忘れずに．

// @require {コピーしたURL}

方法2: eval()を使う

この方法ではhighlight.jsがサポートするいかなる言語もハイライトすることができます．しかし，よく知られているようにeval()の使用には危険が伴います．．この方法を使う場合は細心の注意を払いましょう．

84行目付近から次のようなコードを探しましょう．

    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;
    }

これを次のように書き換えましょう．

    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;
    }

テーマを変更する

デフォルトではhighlight.jsのdefault.cssを使用します．テーマを変更するにはまずhttps://cdnjs.com/libraries/highlight.jsからcssを選んでURLをコピーしましょう．

次に，スクリプト上部から次のようなコードを見つけましょう．

// @resource css https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/default.min.css

このコードを次のコードで置き換えましょう．{コピーしたURL}を先ほどコピーしたURLで置き換えるのを忘れずに．

// @resource css {コピーしたURL}