hugoでshortcodesを用いてtableにcssを適応

久しぶりにHugoの投稿をしようと思います。今回の内容は、「マークダウン形式で書いたtableに対して、cssを適応させる」 です。

通常のマークダウンで記入
#

例えば、マークダウン形式でテーブルを書くと、以下のようになります。

| 選手                     | 背番号 | 国       |
| ------------------------ | ------ | -------- |
| 古橋 亨梧                | 16     | 日本     |
| アンドレス・イニエスタ   | 8      | スペイン |
| トーマス・フェルマーレン | 4      | ベルギー |

↓サイト上での表示↓

選手	背番号	国
古橋亨梧	16	日本
アンドレス・イニエスタ	8	スペイン
トーマス・フェルマーレン	4	ベルギー

表示されるテーブルのデザインは、利用しているテンプレートに乗っ取る形になります。

自作shortcodesで任意のcssを適応
#

自分で制作したcssをマークダウンで記入したテーブルに反映してみた結果が以下になります。苦肉の策みたいなやり方なので、他に良いやり方もあるかもしれません。

まず、以下のようなshortcodeファイルを作成します。

{{if (.Get "class")}}
    <div class = "{{ .Get "class" }}">
{{ else }}
    <div class = "simple-table">
{{ end }}
{{.Inner | markdownify }}
</div>

続いて、cssを以下のように作成します。

div.simple-table table {
    width: 100%;
    border-top: 1px solid #e2e2e2;
    border-left: 1px solid #e2e2e2;
    background: #ffffff;
    margin-bottom:15px;
    margin-left: auto;
        margin-right: auto;
        color:#000000;
}

div.simple-table table th{
    border-right: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
        padding:10px 0;
    text-align: center;
}
div.simple-table table td {
    font-size: 0.9em;
    border-right: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
    text-align: center;
    padding:10px 0;
}
div.simple-table table th {
    background-color: #f3f0f0;
}

そして、以下のようにマークダウンを記入します。

{{< mdtable class = "simple-table" >}}
| 選手                     | 背番号 | 国       |
| ------------------------ | ------ | -------- |
| 古橋  亨梧               | 16     | 日本     |
| アンドレス・イニエスタ   | 8      | スペイン |
| トーマス・フェルマーレン | 4      | ベルギー |
{{< mdtable >}}

これらを適応すると、以下のような表示になります。

選手	背番号	国
古橋亨梧	16	日本
アンドレス・イニエスタ	8	スペイン
トーマス・フェルマーレン	4	ベルギー

ざっくりとした説明
#

最初は{{replace}} を使って{{ {.Inner | markdownify }}で、マークダウン形式からマークアップに変換し、受け取った<table>の中身を書き換える方法を考えていました。しかし、あまりうまく動かず… ですので回避策として、shortcodes側で<table>の外側にクラスを適応した <div>をかまして、cssで対応させる手法をとりました。処理の流れ等の詳しい説明は今回は割愛します。