AtCoder Better Highlighter

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

Tendrás que instalar una extensión para tu navegador como Tampermonkey, Greasemonkey o Violentmonkey si quieres utilizar este script.

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

Necesitarás instalar una extensión como Tampermonkey o Violentmonkey para instalar este script.

Necesitarás instalar una extensión como Tampermonkey o Userscripts para instalar este script.

Necesitará instalar una extensión como Tampermonkey para instalar este script.

Necesitarás instalar una extensión para administrar scripts de usuario si quieres instalar este script.

(Ya tengo un administrador de scripts de usuario, déjame instalarlo)

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

(Ya tengo un administrador de estilos de usuario, déjame instalarlo)

Autor
shouth
Instalaciones diarias
0
Instalaciones totales
557
Calificaciones
0 0 0
Versión
0.5.4
Creado
10/10/2020
Actualizado
19/12/2020
Tamaño
4,88 KB
Licencia
Desconocida
Funciona en

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}