やりたいこと

本サイトは世界最速(The world’s fastest framework for building websites)という謳い文句で知られる、 Hugo によって構築されています。

Hugoでは記事はmarkdownで記述するわけですが、たまにmarkdownゆえに表現力が少し乏しいと感じることもあります。 (それが好都合だとも思っていますが)

例えば以下のような乳幼児の体重・身長の表¹ があった場合

ではなく

とした方が分かりやすくないですか？

とにかくはじめます🍛

markdown-it

上記のような表は markdown-it と呼ばれるモジュールおよびそのプラグインを使用すると実現できます。

そしてHugoのショートコードを利用して、特定のmarkdownだけmarkdown-itを使って変換をさせます。

つまりこんな感じ

{{<markdown>}}
ここは`markdown-it`で処理させる
{{</markdown>}}

Hugoのmarkdownエンジンを変更するのではなく、特定のmarkdownだけを変換対象とする考え方です。 これによりできるだけ世界最速の邪魔をしないようにします。

ショートコードの作成

markdown文字列は netlifyの Functions を通じてmakdown-itにより変換するだけです。

{{ $query := .Inner | base64Encode | querify "s" | printf "%s" }}

{{ $endpoint := printf "%s/markdown?" $.Page.Site.Params.api_endpoint}}
{{ $jsonData := getJSON $endpoint $query }}
{{ $html := $jsonData.m }}

{{ safeHTML $html }}

ちなみにquerifyを使ってエンコードしないと、 Base64でエンコードされた+記号がURLではスペースに変換されてひどいことになります。

Functionsの作成

Functionsについては以前の記事も参考にしてください。

404 Page not found | データ駆動はじめ

https://dd1.work/blog/contactform/

何もわからないこの世の中をなんとか生きていくためにデータ解析を始めたカレーのブログ

まず必要なモジュールをインストールします。 テーブルの変換には markdown-it-multimd-table というプラグインを使います。

$ npm install makdown-it markdown-it-multimd-table

あとはこれで変換する処理を行う関数を書きます。

const md = require('markdown-it')()
  .use(require('markdown-it-multimd-table'),
       {enableRowspan: true})
exports.handler = (event, context, callback) => {
  const s = event.queryStringParameters.s
  const t = Buffer.from(s, 'base64').toString()

  callback(null, {
    statusCode: 200,
    "headers": {
      "Content-Type": "application/json; charset=utf-8",
    },
    body: JSON.stringify({
      html: md.render(t)
    })
  })
}

行結合もサポートするため{enableRowspan: true}を付けています。

結果

冒頭のテーブルはmarkdownショートコードを利用して、以下のように記述すれば生成されるようになりました。

|生後    | 体重             || 身長             ||
|^^      | 男      | 女      | 男      | 女      |
|------- | ------- | ------- | ------- | ------- |
|0月     | 3.00    | 2.94    | 49.0    | 48.5    |
|1月     | 4.79    | 4.47    | 55.6    | 54.6    |
|2月     | 5.84    | 5.42    | 59.1    | 57.9    |
|3月     | 6.63    | 6.15    | 62.0    | 60.7    |
|4月     | 7.22    | 6.71    | 64.3    | 63.0    |
|5月     | 7.66    | 7.14    | 66.2    | 64.9    |

おまけ

ちなみにオプションやプラグインを設定すれば、テーブル以外も表現の幅は広がります。

例えばhtmlとlinkifyオプションを有効にすると

Option   | サンプル
-------  | ------
html     | <div style="transform:rotate(-30deg);">回転</div>
linkify  | gohugo.io

は以下のように表示されます。

• htmlはhtmlタグを直接記入可能
• linkifyはリンクを自動で判別

htmlを直書きする機会は少ないですが、likifyはリンク集などを作る際には便利かもしれません。

追記(2019/12/15)

Hugoの0.60.0よりマークダウンのエンジンが goldmark になったようです。²

これによりlinkifyなど CommonMark に準拠した機能であれば標準でも利用可能になりました。

ただ本記事でやりたかったセル結合などはできないので、やはりmarkdown-itはまだ必要になりそうです。