AtCoder Better Highlighter

Better syntax highlighting for AtCoder using highlight.js.

Author
shouth
Daily installs
1
Total installs
428
Ratings
0 0 0
Version
0.5.4
Created
2020-10-10
Updated
2020-12-19
License
N/A
Applies to

2022/10/9
This UserScript is no longer updated; Use AtCoder Comfortable Editor instead.

AtCoder Better Highlighter

This is a script that colorize codes in submission pages with highlight.js. https://gist.github.com/shouth/1d40c814231ad712725b97eeb78c62ab

Languages colorized by default

  • Bash
  • C
  • C++
  • C#
  • Go.
  • Java
  • JavaScript
  • Kotlin
  • Objective-C
  • PHP
  • Perl
  • Python
  • Ruby
  • Rust
  • Swift
  • TypeScript

Colorize other languages

First, open this script in the editor of your User Script extension.

Method 1: Add a dependency library

Copy the URL of the script for your language from https://cdnjs.com/libraries/highlight.js. Next, find this line in the top of the script.

// @require https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js

Then add the line below after the line above. Replace {copied URL here} with the URL you just copied.

// @require {copied URL here}

Method 2: Use eval().

By this method, you can highlight any languages that highlight.js supports. However, as is well known, it is dangerous to use eval(). Be careful of using this method.

Find these lines near line 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;
    }

Then rewrite them as follows.

    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;
    }

Change themes

By default, this script uses default.css of highlight.js. To change themes, choose and copy the URL of css from https://cdnjs.com/libraries/highlight.js . Next, find this line in the top of the script.

// @resource css https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/default.min.css

Then replace the line above with the line below. Replace {copied URL here} with the URL you just copied.

// @resource css {copied URL here}