AtCoder Better Highlighter

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

Vous devrez installer une extension telle que Tampermonkey, Greasemonkey ou Violentmonkey pour installer ce script.

You will need to install an extension such as Tampermonkey to install this script.

Vous devrez installer une extension telle que Tampermonkey ou Violentmonkey pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey ou Userscripts pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey pour installer ce script.

Vous devrez installer une extension de gestionnaire de script utilisateur pour installer ce script.

(J'ai déjà un gestionnaire de scripts utilisateur, laissez-moi l'installer !)

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

(J'ai déjà un gestionnaire de style utilisateur, laissez-moi l'installer!)

Auteur
shouth
Installations quotidiennes
1
Installations (total)
558
Notes
0 0 0
Version
0.5.4
Créé
10/10/2020
Mis à jour
19/12/2020
Taille
4,88 ko
Licence
N/A
S'applique à

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}