Confluenceでコードブロックを使わずにコードを貼り付けたい

Confluenceでコードを貼ろうとすると、
まぁ、これがとにかくめんどくさい。

マクロにあるコードブロックを使うことになりますが、
ショートカット（{code）でコードブロックを呼び出せたとしても
強調表示はいちいち作ったコードブロックをクリックして編集を選び、その上で選択しなければならず、
複数行選んで一気にインデントをしようと思っても一行目しかできずストレスが溜まりまくり。

イライラのあまり鼻血が出そうになったので、コードブロックを使わずコードを貼る方法をなんとか考えました。

前提条件

Confluenceのスペースにある「スタイルシート」を編集することが前提となるので、

• スペース管理権限がある人
• あるいはスペース管理権限がある人に頼める人

が前提になります。また、

• Sublime Text 3
• （Sublime Text 3の）Package Control
• （Sublime Text 3のプラグインの）OmniMarkupPreviewer

が必要になります。

1. Sublime Text 3でOmniMarkupPreviewerが使えるようにする

ST3でMarkdownをブラウザでプレビューできる、「OmniMarkupPreviewer」を導入します。
つまり、ST3上でMarkdownで記述したものをブラウザに表示させ、これをConfluenceに貼り付ける、ということです。

1. Sublime Text 3をダウンロード
2. Package Controlをインストール
3. ST3でPackage Controlを呼び出し（Shift+Cmd+P）、「Install Package」→「OmniMarkupPreviewer」を選ぶ

2. ConfluenceにCSSを反映させる

Confluenceの「スペースツール」→「ルックアンドフィール」→「スタイルシート」に、以下のCSSを貼り付けます。

/* Syntax highlight */
pre.code  {
    word-wrap: normal;
    padding: 16px;
    overflow: auto;
    font-size: 85%;
    line-height: 1.45;
    background-color: #f7f7f7;
    border: 1px solid #bdbcbc;
    border-radius: 3px;
    margin-top: 0;
    margin-bottom: 16px;
    font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
}
pre.code .c { color: #999988; font-style: italic }
pre.code .err { color: #a61717; background-color: #e3d2d2 }
pre.code .k { color: #000000; font-weight: bold }
pre.code .o { color: #000000; font-weight: bold }
pre.code .cm { color: #999988; font-style: italic }
pre.code .cp { color: #999999; font-weight: bold }
pre.code .c1 { color: #999988; font-style: italic }
pre.code .cs { color: #999999; font-weight: bold; font-style: italic }
pre.code .gd { color: #000000; background-color: #ffdddd }
pre.code .gd .x { color: #000000; background-color: #ffaaaa }
pre.code .ge { color: #000000; font-style: italic }
pre.code .gr { color: #aa0000 }
pre.code .gh { color: #999999 }
pre.code .gi { color: #000000; background-color: #ddffdd }
pre.code .gi .x { color: #000000; background-color: #aaffaa }
pre.code .go { color: #888888 }
pre.code .gp { color: #555555 }
pre.code .gs { font-weight: bold }
pre.code .gu { color: #aaaaaa }
pre.code .gt { color: #aa0000 }
pre.code .kc { color: #000000; font-weight: bold }
pre.code .kd { color: #000000; font-weight: bold }
pre.code .kp { color: #000000; font-weight: bold }
pre.code .kr { color: #000000; font-weight: bold }
pre.code .kt { color: #445588; font-weight: bold }
pre.code .m { color: #009999 }
pre.code .s { color: #d14 }
pre.code .na { color: #008080 }
pre.code .nb { color: #0086B3 }
pre.code .nc { color: #445588; font-weight: bold }
pre.code .no { color: #008080 }
pre.code .ni { color: #800080 }
pre.code .ne { color: #990000; font-weight: bold }
pre.code .nf { color: #990000; font-weight: bold }
pre.code .nn { color: #555555 }
pre.code .nt { color: #000080 }
pre.code .nv { color: #008080 }
pre.code .ow { color: #000000; font-weight: bold }
pre.code .w { color: #bbbbbb }
pre.code .mf { color: #009999 }
pre.code .mh { color: #009999 }
pre.code .mi { color: #009999 }
pre.code .mo { color: #009999 }
pre.code .sb { color: #d14 }
pre.code .sc { color: #d14 }
pre.code .sd { color: #d14 }
pre.code .s2 { color: #d14 }
pre.code .se { color: #d14 }
pre.code .sh { color: #d14 }
pre.code .si { color: #d14 }
pre.code .sx { color: #d14 }
pre.code .sr { color: #009926 }
pre.code .s1 { color: #d14 }
pre.code .ss { color: #990073 }
pre.code .bp { color: #999999 }
pre.code .vc { color: #008080 }
pre.code .vg { color: #008080 }
pre.code .vi { color: #008080 }
pre.code .il { color: #009999 }

これはOmniMarkupPreviewerのプレビューで表示されるCSSのセレクタを改変したものです。

OmniMarkupPreviewerではdiv.codehiliteの下にpreタグがあり、これがコードブロックとなっていますが、
Confluenceへの貼り付け時にdivタグは取り除かれてしまうので、直接preタグを参照するようにします。

3. Sublime Text 3でMarkdownを書く＆最後にscriptを貼る

Sublime Text 3で新規ページを開き、SyntaxをMarkdownにした後、
普通にMarkdown記法でコードブロックなどを書きます。

そしてMarkdownの最後に以下のコードを貼り付けます。

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', () => {
    Array.prototype.forEach.call(
        document.querySelectorAll('.codehilite > pre'),
        elm => {
            elm.classList.add('code')
        }
    );
});
</script>

これはクラス名のついていないコードブロック用のpreタグに「code」というクラス名をつけるものです。

4. プレビューで表示させてConfluenceにコピペする

ST3でパッケージコントロールから「OmniMarkupPreviewer: Preview Current Markup in Browser」を選び、
ブラウザに表示させます。
これを丸ごとコピーし、Confluenceに貼り付ければ、コードハイライトがちゃんとついたコードブロックになります。