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}