Help us understand the problem. What is going on with this article?

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

問題

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

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

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

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

作ったもの

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

https://gist.github.com/minoki/ca14e78062e41112ee3248cf18c9718a/raw/848b9e1e0a4e01e675da6668f3f71e22d5aa8434/atcoder-code-prettify.user.js

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

https://gist.github.com/minoki/ca14e78062e41112ee3248cf18c9718a

技術的な話

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が正しくハイライトされる日は来ないと思われます。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした