Qiitadonのコードシンタックスにファイル名を表示するChrome拡張


リポジトリ

ことはじめ

  • Qiitadonに参加してみたところ、何人かがコードシンタックスにファイル名欲しい的なトゥートしてた。
  • ソースみたらDOM上にはファイル名きちんと保持しているっぽいから表示できそうだなぁ。
  • 夜になってもパッと見誰も作ってないから書いてみるかー
  • 公式が普通に表示してくれれば無用

やってること

もともとこんな感じでDOMが作られているので data-filename の有無を確認してcodeタグの子要素に追加してるだけ。

<code data-language="php" data-filename="test.php" class="hljs" data-highlighted="true">
<span class="hljs-keyword">echo</span> <span class="hljs-string">'test'</span>;
</code>

1秒ごとにぶん回してるのが良いとは思ってないけど思いつかなかった。

おわり

久しぶりに簡単だけどjavascript書いたのは楽しかった、dom周りとかいままでjQueryでやっていたところを使わないでやってみたいなぁと思ってたのでリハビリ的には良かったかなぁ。
指摘やら何やらあればよしなに。

てかデータいれてるなら公式がスタイル作って表示するだけなのでは