背景
Slackでオペレーションの進捗を共有してたりしませんか？
弊社インフラチームでは本番作業の進捗をSlackで共有するのが一般的になっていますが、Slackは コードブロックでシンタックスハイライトがされない 仕様のため、とても読みにくいという問題が発生しています。
Slackにはシンタックスハイライトが有効な Snippet という機能も存在します。ただ、こちらは 添付ファイルとして扱われる という仕様のため、アップロード時にタイトルやら何やらを入れなければならず、作業進捗を貼り付けるには面倒くさいという問題が発生します。
書く側も、読む側も、楽をしたい。
そう思って解決策を探しました。
解決策
シンタックスハイライトした結果
まずは結果を見てください。
before
after
まずざっくり説明
これ、beforeはネイティブアプリ、afterはChromeです。
Chrome拡張のTampermonkey(Greasemonkey)のコードを書いて実現しました。
ブラウザでSlackなんてマジかよ・・・ って思った方、私もそう思ってます。
ただ、以下のように使い分けると意外と便利だったりします。
- 通常のチャット用にネイティブアプリのSlack
- 作業進捗確認用にブラウザ版Slack (with Tampermonkey)
このようにネイティブアプリと並行で使うときに、合わせてTampermonkeyに入れておくと便利なUserScriptをメモしておきます。
- サイドバーを縮めたりできるようにする
コードについて補足
内部的に google-code-prettify を利用してシンタックスハイライトを実現しています。言語は bsh に固定しています。
このコードには言語の自動的な判別機能がありますが、チャットでのコードやコンソールログのやり取りのように、部分的に転載するようなテキストに対しては上手に判定が効きません。オペレーションの共有用ということで、 bsh を選択しています。
スクリーンショットを見ていただくと分かりますが、色の付け方としては正確性はありません。しかし、読みやすさはぐっと向上します。
diff に対しての色付けが上手くできないため、この点は改善が必要だと思っています。
なお、私はJavascript初心者なので、コードの作りに突っ込みどころが多いかもしれません。修正のPR大歓迎です。
まとめ
以上、ブラウザ版を利用してTampermonkeyで装飾するという、なんとも残念な解決策でコードを見やすくした話でした。
Slackがネイティブでシンタックスハイライトに対応してくれることを願うばかりです。