LoginSignup
2

More than 3 years have passed since last update.

AtCoderのシンタックスハイライトをマシにするUserScriptを作った

Posted at

問題

2020年9月現在、AtCoderの提出済みコードのシンタックスハイライトは言語に応じたハイライトを行なっていません。

その結果、キーワードが正しく色付けされなかったり、識別子にプライムを使える言語 (HaskellやOCaml) でハイライトが壊れる、というような現象が起こっています。例えば この提出 の44行目、 U.foldl' 以降が全部文字列の色になっています。

この問題は1年半前に筆者が原因を特定してchokudaiさんに報告しましたが、なんやかんやでまだ修正されていません。

ただひたすら待っているだけなのもアレなので、ユーザー側でこの問題を修正するUserScriptを作ってみました。Firefox上のGreasemonkeyとChrome上のTampermonkeyで動作確認しています。

作ったもの

GreasemonkeyやTampermonkeyを導入している方はこのURLを踏むとインストールできます:

ソースを読みたい方はこっちです:

技術的な話

UserScriptとして実装するにあたり、run_prettifier.jsのURLの末尾に「?lang=hs」みたいなやつをつけるという選択肢は取れません。なので、自前で必要なスクリプトを読み込んでいます。

言語・処理系名の部分のXPathを見ればわかりますが、AtCoderのサイトのDOM構造の改変に脆弱です。Firefoxのインスペクターからコピってきたらこうなりました。もうちょっと上手い書き方があるとは思いますが、実際に動かなくなってから考えます。

ちなみに、2020年9月現在、code-prettifyの開発は既に終了しているようです(archivedになっている)。AtCoderがシンタックスハイライト方法をcode-prettify以外のもの(あるいはcode-prettifyの適当なfork)に変えない限り、最近の言語機能、例えばC++14のdigit separatorが正しくハイライトされる日は来ないと思われます。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2