チャットワークの[code]記法で書かれたコードをシンタックスハイライトする。

##できること

チャットワークの[code]記法はソースコードを貼り付ける時に便利ですが、ソースコードの色付けまではしてくれません。味気ないので自動で色付けするようにしました。

デフォルトだと味気ないのを、、、

こんな感じで色気付かせます。

##導入方法

GoogleChrome限定で、TampermonkeyというChrome拡張のスクリプトを利用します。

Tampermonkey - Chrome ウェブストア

インストールしたら、Chromeでチャットワークを開いた状態で、右上のTampermonkeyのアイコンをクリックし、「新規スクリプトを追加...」を押下します。

そしたら以下のコードを貼り付けて保存します。

// ==UserScript==
// @name         chatwork syntax highlighter
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.chatwork.com/
// @require      https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js
// @resource     style https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/darkula.min.css
// @grant        GM_getResourceText
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    const observerConfig = { attributes: false, childList: true, characterData: false };

    // スタイル反映
    var style = GM_getResourceText('style');
    GM_addStyle(style);

    // rootエレメント監視用オブザーバ
    const root = document.getElementById('root');
    const rootObserver = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if (mutation.type === 'childList' && mutation.target.id === 'root') {
                rootObserver.disconnect();
                var timeLine = document.getElementById('_timeLine');
                timeLineObserver.observe(timeLine, observerConfig);
            }
        });
    });

    // _timeLineエレメント監視用オブザーバ
    const timeLineObserver = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            // _timeLineエレメント配下に何かしらの変更があった
            if (mutation.type === 'childList') {
                // <code>タグ全てに対してシンタックスハイライトを設定。
                for (var i = 0, n = document.getElementsByTagName('code').length; i < n; ++i) {
                    hljs.highlightBlock(document.getElementsByTagName('code').item(i));
                }
            }
        });
    });

    rootObserver.observe(root, observerConfig);
})();

chatworkをリロードすると以下のようにスクリプトが有効になり、[code]記法で記述したソースコードが色付けされるはずです。

##スクリプト解説

ざっくりと仕組みの説明をします。

まず、Tampermonkeyにより任意のWebページで閲覧者側が作ったJavaScriptを動かすことができます。ブックマークレットの便利だよ版みたいなイメージでしょうか。

で、そこにhighlight.jsというシンタックスハイライト用のライブラリと、MutationObserverによるDOMツリーの変更検知を組み合わせることで、チャットワークに<code>要素が追加されたタイミングで、要素に対してシンタックスハイライト処理を行なっていきます。

詳細についてはソースコードをお読みいただければと思います。

// @resource     style https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/darkula.min.css

尚、このコメントで読み込むcssを変更することで、お好みのカラーテーマを設定することができます。

##まとめ

いかがだったでしょうか？

TampermonkeyとMutationObserverを組み合わせると、既存のWebページに対して読み込み完了時のタイミングに限らず介入できるため、かなりやれることに応用が効くと感じました。
利用しているWebページで提供されていない機能を自分で付け加えることが可能なので、他にも色々と考えてみたいと思います。

何かご指摘等ありましたら、コメントいただければ幸いです。