【Hugo】 マークダウン + HTML

SITE

 前回の続き。

 マークダウンは一から書いていくぶんには良いのかもしれない。
 が、既存のHTMLファイルをマークダウンに変換すると一部がうまく変換されない。

スポンサーリンク

マークダウンでアンカーリンクを使いたい

HTML – Markdown 変換(www.pronama.jp/md/

というツールを使わせてもらったのだが、アンカーリンク(ページ内リンク)の箇所が変換されていなかった。

 ツールの問題ではなく、そもそもアンカーに対応するマークダウンが存在しない。つまり、

<a id = "target1">リンク先</a>
・
・
・
<a href = "#target1">飛びます</a>

のうち後者の飛ばす側はリンクのマークダウン

[飛びます](#target1)

と対応しているが、前者のリンク先の設定ができない。id属性(id=" ")に対応するマークダウンが存在しないため。
 ※ 元々はid=" "ではなくname=" "が使われていた

 一応、見出し h1~h6(#~######)に限っては、例えば

<h3 id = "target2">見出し3</h3>

### 見出し3 {#target2}

といった具合に使えるが、

 見出し以外でアンカーを多用しているHTMLファイルが結構あるので困った。

 トラップに引っ掛かった感じで気持ち悪かったが、

シラベルノート 【HUGO】 マークダウンの中にHTMLコードを書いて表示する方法   

というページを見つけた。

 Hugoの場合に限るが、ショートコードを使えばHTMLタグを反映させられる、とのこと。

  •  layouts/shortcodesフォルダの中に適当な(短めの)名前のファイルを作る
     例えばinn.html
  •  inn.htmlの中に以下の1行
     {{ .Inner }}
     を書く
  •  ファイル名のショートコード {{<inn>}} {{</inn>}}でHTMLタグを囲む。
{{<inn>}}<a id = "target1">リンク先</a>{{</inn>}}

といった具合に書く。

スポンサーリンク

マークダウンとHTMLの混在OK

 しかし、アンカーを多用しているHTMLファイルの手直しは結構面倒。
 HTMLタグより楽に書けるからマークダウンの意味があるのに余計手間がかかるのはおかしい、と薄々気づく。

 全てマークダウンだけで書く必要はないはず……。
 HTMLと混在していても構わないのでは……。

 Hugoの場合に限るが、ショートコードを使わなくてもHTMLタグを反映させられる方法があった。というよりHugoのv0.60.0より前はマークダウンにHTMLが混在していてもOKだったようだ。

 v0.60.0からMarkdown parserすなわち「マークダウンからHTMLへ変換するエンジン」が変わって、(デフォルトで)マークダウン中のHTMLが無視されるようになった、とのこと。
  ※ v0.60.0~:Goldmark
    ~v0.60.0:Blackfriday

 Hugoの設定ファイル config.toml

[markup.goldmark.renderer]
unsafe = true

の2行を加えることでマークダウン中のHTMLが反映されるようになった。

 デフォルトはunsafe = false
 より詳細な説明はHugoのこちらのページ

 もっと早くから知っていれば手間を省けたが、おかげでマークダウンを覚えることができた。

スポンサーリンク
ふシゼン
タイトルとURLをコピーしました