AtCoder Better Highlighter

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

Чтобы установить этот скрипт, вы сначала должны установить расширение браузера, например Tampermonkey, Greasemonkey или Violentmonkey.

Для установки этого скрипта вам необходимо установить расширение, такое как Tampermonkey.

Чтобы установить этот скрипт, вы сначала должны установить расширение браузера, например Tampermonkey или Violentmonkey.

Чтобы установить этот скрипт, вы сначала должны установить расширение браузера, например Tampermonkey или Userscripts.

Чтобы установить этот скрипт, сначала вы должны установить расширение браузера, например Tampermonkey.

Чтобы установить этот скрипт, вы должны установить расширение — менеджер скриптов.

(у меня уже есть менеджер скриптов, дайте мне установить скрипт!)

Чтобы установить этот стиль, сначала вы должны установить расширение браузера, например Stylus.

Чтобы установить этот стиль, сначала вы должны установить расширение браузера, например Stylus.

Чтобы установить этот стиль, сначала вы должны установить расширение браузера, например Stylus.

Чтобы установить этот стиль, сначала вы должны установить расширение — менеджер стилей.

Чтобы установить этот стиль, сначала вы должны установить расширение — менеджер стилей.

Чтобы установить этот стиль, сначала вы должны установить расширение — менеджер стилей.

(у меня уже есть менеджер стилей, дайте мне установить скрипт!)

Автор
shouth
Установок в день
1
Всего установок
558
Оценки
0 0 0
Версия
0.5.4
Создано
10.10.2020
Обновлено
19.12.2020
Размер
4,9 КБ
Лицензия
нет данных
Работает на

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}