| categories:web

Hugo テーブルにクラスを割り当てる

通常マークアップでテーブルを書くときには、下記のような表記になります。(いつも書き方を忘れます。)

Name    | Age
--------|-----:
Bob    | 27
Alice   | 23

ただ、hugoで出力されるファイルは非常にシンプルな形になっています。 このサイトのテンプレートはPure.cssを使っていて、なるべくなら記事内にHTMLファイルは書き込みたくないので、 クラスを指定する方法をネットで検索してみました。

<table>
<thead>
<tr>
<th>Name</th>
<th align="right">Age</th>
</tr>
</thead>

<tbody>
<tr>
<td>Bob</td>
<td align="right">27</td>
</tr>

<tr>
<td>Alice</td>
<td align="right">23</td>
</tr>
</tbody>
</table>

mmarkというmarkdown拡張?のプログラムがあり、このプログラムを入れることでクラス指定ができるようになるようです。 Mmark: powerful markdown parser の開発者ページよりバイナリーを持ってきたり、ソースからビルドしたりもできるようですが、homebrewのセラー・リストにもありがたいことにおいてありました。

ということで、スパッと簡単インストール。で、導入完了。

jin$ brew install mmark
Updating Homebrew...
==> Homebrew is run entirely by unpaid volunteers. Please consider donating:
  https://github.com/Homebrew/brew#donations


==> Downloading https://homebrew.bintray.com/bottles/mmark-1.3.6.el_capitan.bottle.tar.gz
############################################################### 100.0%
==> Pouring mmark-1.3.6.el_capitan.bottle.tar.gz
🍺  /usr/local/Cellar/mmark/1.3.6: 6 files, 3.3MB
jin$

インストールし、記事内のヘッダーにmarkup: "mmark"を加えて、下記の通りクラス名{.table .pure-table .pure-table-horizontal .table-striped .table-responsive}を書き込みます。細かい指定はできませんが必要十分。キャプションも付け加えることもできます。たーぶん、imgタグにも使えると思います。

---
markup: "mmark"
---

{.table .pure-table .pure-table-horizontal .table-striped .table-responsive}
Name    | Age | Sex 
--------|-------|-------:
Bob   | 27    | male
Alice  | 23    | female
Table: This is the caption.

This is the caption.
Name Age Sex
Bob 27 male
Alice 23 female

でうまく表示されます。 Pure.css のテーブルについてのクラス名などは https://purecss.io/tables/ より。

参考:Setting the class of markdown tables

comments powered by Disqus