Hugo で Markdeep な記述ができるようになった

no extension

先日 Hugo v0.93 がリリースされたが，このバージョンで Markdeep な記述にネイティブ対応したそうだ。

Markdown diagrams and code block render hooks. Now it’s possible create custom templates for Markdown code blocks, either for all or just for specific programming languages. This can also be used to render diagrams from Markdown code blocks. We provide GoAT (Go ASCII Tool) natively from Hugo, but you can also add your own template to get Mermaid support. The implementation of GoAT is a Go implementation by @blampe of markdeep.mini.js’ diagrams. See the diagram documentation for details.

GoAT (Go ASCII Tool) は Markdeep を Go で実装し直したものだそうで，たとえば

```goat
+-------------------+                           ^                      .---.
|    A Box          |__.--.__    __.-->         |      .-.             |   |
|                   |        '--'               v     | * |<---        |   |
+-------------------+                                  '-'             |   |
                       Round                                       *---(-. |
  .-----------------.  .-------.    .----------.         .-------.     | | |
 |   Mixed Rounded  | |         |  / Diagonals  \        |   |   |     | | |
 | & Square Corners |  '--. .--'  /              \       |---+---|     '-)-'       .--------.
 '--+------------+-'  .--. |     '-------+--------'      |   |   |       |        / Search /
    |            |   |    | '---.        |               '-------'       |       '-+------'
    |<---------->|   |    |      |       v                Interior                 |     ^
    '           <---'      '----'   .-----------.              ---.     .---       v     |
 .------------------.  Diag line    | .-------. +---.              \   /           .     |
 |   if (a > b)     +---.      .--->| |       | |    | Curved line  \ /           / \    |
 |   obj->fcn()     |    \    /     | '-------' |<--'                +           /   \   |
 '------------------'     '--'      '--+--------'      .--. .--.     |  .-.     +Done?+-'
    .---+-----.                        |   ^           |\ | | /|  .--+ |   |     \   /
    |   |     | Join        \|/        |   | Curved    | \| |/ | |    \    |      \ /
    |   |     +---->  o    --o--        '-'  Vertical  '--' '--'  '--  '--'        +  .---.
 <--+---+-----'       |     /|\                                                    |  | 3 |
                      v                             not:line    'quotes'        .-'   '---'
  .-.             .---+--------.            /            A || B   *bold*       |        ^
 |   |           |   Not a dot  |      <---+---<--    A dash--is not a line    v        |
  '-'             '---------+--'          /           Nor/is this.            ---
```

てな感じにコード・ブロックで囲って goat キーワードを付ければ

& A M S i o i q f b B x u j o e a ( - x d r a > e f R > c o C n u o b ( n r ) ) d n e e J d r o s i n N o R D t o i u a a n g d d l o i t n e D i a g o n a l s C V u e r r v t e i d c a l n o t A N C : o u l d r r i A a / I v n s i n e e h s t d - e - t r l B i h i i s i o n ' s r e q n . u * o o b t t o e l a s d ' * l i n e D o n S e e ? a r c 3 h

と SVG 画像に変換してくれる。 ページのスタイルに合わせてくれるのも嬉しい。

また Hugo のレンダー・フックを使って Mermaid にも対応できる。

まず，各 Web ページの <body> 要素内にあらかじめ

<body>
  ...
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
  <script>
    mermaid.initialize({startOnLoad: true, fontFamily: "sans-serif", theme: "dark", sequence: {height: 40, mirrorActors: false}});
  </script>
<body>

と記述し Mermaid を有効にしておくこと。 次に Hugo 環境の layouts/_default/_markup/ フォルダ（ない場合は作成）に render-codeblock-mermaid.html というファイルを作って

<div class="mermaid">
{{- .Inner | safeHTML }}
</div>

と定義しておく。 これでコード・ブロックを使って

```mermaid
sequenceDiagram
    カバ->>+カバン: あなた，泳げまして？
    カバン-->>-カバ: いえ
    カバ->>+カバン: 空は飛べるんですの？
    カバン-->>-カバ: いえ
    カバ->>+カバン: じゃあ，足が速いとか？
    カバン-->>-カバ: いえ
    カバ->>カバン: あなた，何にもできないのねぇ
    loop
        カバン->>カバン: ううっ
    end
```

などと記述すれば

sequenceDiagram カバ->>+カバン: あなた，泳げまして？ カバン-->>-カバ: いえ カバ->>+カバン: 空は飛べるんですの？ カバン-->>-カバ: いえ カバ->>+カバン: じゃあ，足が速いとか？ カバン-->>-カバ: いえ カバ->>カバン: あなた，何にもできないのねぇ loop カバン->>カバン: ううっ end

と展開される。 Hugo ドキュメントの Diagrams の項にもう少し賢い記述が載ってるので参考にどうぞ。

Mermaid 記法は自作の shortcode で対応していたが，コード・ブロックで書けるなら今後はそっちにするかな。

ブックマーク