PlantUMLでコードブロックを表現する

# はじめに

[Windowsのsortコマンドのアルゴリズムを探る（照合順番の闇）](https://qiita.com/TETSURO1999/items/a6e954bf1770ef8799e3)という記事で，ソート前後のテキストを比較した。コマンドラインプログラムの出力でもあるので，ソート前後のテキストをコードブロックを用いて表現しようとしたが，Qiita の markdown のコードブロックそのままでは恰好悪いので，PlantUML のコードブロックを使って表現することにした。

# Qiita の markdown のコードブロック

普通にコードブロックを用いて記述すると下記のようになるのだが，ソート前後の内容が一画面に収まらない（横に並べて比較できない）ので，見ても分かりにくいと思う。とくに各行最大で二文字までしかないのに横幅はいっぱいまで広がっており，正直画面の無駄遣いである。

```:ソート前
スイ
スウ
スエ
スシ
スス
スセ
スー
ス
くい
くう
くえ
くき
くく
くけ
くー
く
ＣＢ
ＣＣ
ＣＤ
Ｃー
Ｃ
```

```:ソート後
Ｃ
ＣＢ
Ｃー
ＣＣ
ＣＤ
く
くい
くう
くー
くえ
くき
くく
くけ
ス
スイ
スウ
スー
スエ
スシ
スス
スセ
```

# PlantUMLでコードブロックを書く

という訳で PlantUML を用いてコードブロックを書いてみた。文字の大きさや角の丸めなど markdown のコードブロックのスタイルにできるだけ寄せた。ソート前後を左右に並べて比較できるよう横幅を狭くした。もっと狭くすることもできる。

```plantuml
@startuml
<style>
root {
  margin: 0;
  padding: 0;
}
title {
  roundCorner: 16;
  padding: 0 16 16 16;
  horizontalAlignment: left;
  backgroundColor: #202020;
  fontColor: white;
  fontStyle: normal;
  fontSize: 14;
}
</style>
sprite TITLE <svg width="200" height="28" viewbox="0 0 200 28">
<path d="M0 0 v24 a4 4 0 0 0 4 4 h64 a4 4 0 0 0 4 -4 v-24 h-72" fill="#606060" />
<text x="7" y="21" font-size="14" fill="white">ソート前</text>
</svg>
title
<$TITLE>

<code>
スイ
スウ
スエ
スシ
スス
スセ
スー
ス
くい
くう
くえ
くき
くく
くけ
くー
く
ＣＢ
ＣＣ
ＣＤ
Ｃー
Ｃ
</code>
end title
@enduml
```

```plantuml
@startuml
<style>
root {
  margin: 0;
  padding: 0;
}
title {
  roundCorner: 16;
  padding: 0 16 16 16;
  horizontalAlignment: left;
  backgroundColor: #202020;
  fontColor: white;
  fontStyle: normal;
  fontSize: 14;
}
</style>
sprite TITLE <svg width="200" height="28" viewbox="0 0 200 28">
<path d="M0 0 v24 a4 4 0 0 0 4 4 h64 a4 4 0 0 0 4 -4 v-24 h-72" fill="#606060" />
<text x="7" y="21" font-size="14" fill="white">ソート後</text>
</svg>
title
<$TITLE>

<code>
Ｃ
ＣＢ
Ｃー
ＣＣ
ＣＤ
く
くい
くう
くー
くえ
くき
くく
くけ
ス
スイ
スウ
スー
スエ
スシ
スス
スセ
</code>
end title
@enduml
```

加えて行間も狭くなっており，全体を見通し易くなっている。ただし，これは意図的に行ったものではなく，PlantUML のデフォルト設定をそのまま使っているに過ぎない。残念ながら，行間を変更する方法はまだ分かっていない。

# どうやって書いてるの？

実は PlantUML にもコードブロック `<code>...</code>` があるので，その機能を使っているだけである。タイトルはインライン SVG スプライトという技術を用いて表現した。インライン SVG スプライトは横幅として 200 ピクセルを確保するためにも用いている。PlantUML のインライン SVG スプライト機能については下記記事を参照のこと。

[QiitaのmarkdownでSVGを使って作図する - Qiita](https://qiita.com/TETSURO1999/items/870962714724dde98651)


````markdown:PlantUMLによるコードブロックの例
```plantuml
@startuml
<style>
root {
  margin: 0;
  padding: 0;
}
title {
  roundCorner: 16;
  padding: 0 16 16 16;
  horizontalAlignment: left;
  backgroundColor: black;
  fontColor: white;
  fontStyle: normal;
  fontSize: 14;
}
</style>
sprite TITLE <svg width="200" height="28" viewbox="0 0 200 28">
<path d="M0 0 v22 a6 6 0 0 0 6 6 h60 a6 6 0 0 0 6 -6 v-22 h-72" fill="#606060" />
<text x="7" y="21" font-size="14" fill="white">ソート前</text>
</svg>
title
<$TITLE>

<code>
スイ
スウ
スエ
スシ
スス
スセ
スー
ス
くい
くう
くえ
くき
くく
くけ
くー
く
ＣＢ
ＣＣ
ＣＤ
Ｃー
Ｃ
</code>
end title
@enduml
```
````

# 余談

そもそもは下記の記事が発端である。Qiita の markdown ではシンタクスハイライトとして Rouge を採用しているが，バッチファイル `bat` のシンタクスハイライトの色付けが気持ち悪いので，筆者はバッチファイルをコードブロックで記述する際にも言語の種類として `bat` を適用しないことにしている。

[Qiitaでバッチファイルのシンタクスハイライトが謎な件 - Qiita](https://qiita.com/TETSURO1999/items/6e13356babbd8824b3ed)

代替手段として内々に研究していたのが今回紹介した PlantUML のコードブロックである。ただし，PlantUML のコードブロックはシンタクスハイライトに対応しておらず，コードブロック内で自由に色付けもできない。つまり，本来の目的はまだ達成できていない。

お蔵入りしそうな技術ではあったが，日の目を見られて良かった。