AtCoder Better Highlighter

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

Bu betiği kurabilmeniz için Tampermonkey, Greasemonkey ya da Violentmonkey gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

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

Bu betiği kurabilmeniz için Tampermonkey ya da Violentmonkey gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği kurabilmeniz için Tampermonkey ya da Userscripts gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

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

Bu komut dosyasını yüklemek için bir kullanıcı komut dosyası yöneticisi uzantısı yüklemeniz gerekecek.

(Zaten bir kullanıcı komut dosyası yöneticim var, kurmama izin verin!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(Zateb bir user-style yöneticim var, yükleyeyim!)

Yazar
shouth
Günlük kurulumlar
1
Toplam kurulumlar
559
Değerlendirmeler
0 0 0
Versiyon
0.5.4
Oluşturulma
10.10.2020
Güncellenme
19.12.2020
Boyut
4,88 KB
Lisans
N/A
Geçerli

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}