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


##できること

チャットワークの[code]記法はソースコードを貼り付ける時に便利ですが、ソースコードの色付けまではしてくれません。味気ないので自動で色付けするようにしました。
<img width="698" alt="スクリーンショット 2018-09-13 23.51.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/31379/e1c043c7-6bb7-ccbc-a730-11483e735e89.png">
デフォルトだと味気ないのを、、、
<img width="705" alt="スクリーンショット 2018-09-13 23.53.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/31379/d2759790-1f24-03cd-5369-18df4a29490a.png">
こんな感じで色気付かせます。

##導入方法

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

[Tampermonkey - Chrome ウェブストア](https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo)

インストールしたら、Chromeでチャットワークを開いた状態で、右上のTampermonkeyのアイコンをクリックし、「新規スクリプトを追加...」を押下します。
<img width="285" alt="スクリーンショット 2018-09-14 0.08.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/31379/71dabe85-de82-8bb8-30bf-01e68086911b.png">

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

```javascript
// ==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]記法で記述したソースコードが色付けされるはずです。
<img width="286" alt="スクリーンショット 2018-09-14 0.27.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/31379/7fc3e350-c0a1-3786-e6c6-ce0420bbcb30.png">

##スクリプト解説

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

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

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

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

```javascript
// @resource     style https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/darkula.min.css
```
尚、このコメントで読み込むcssを変更することで、お好みのカラーテーマを設定することができます。

##まとめ

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

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

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