Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

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

問題

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

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
1
Help us understand the problem. What are the problem?