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}