【Hugo】MarkdownやソースコードをShortcodes内に記載する方法

前提

Hugo: v0.125.4

対応内容

MarkdownをShortcode内に記載したときに、期待した結果が得られないことがあったので整理。
対応する方法としては、設定の markup.goldmark.renderer.unsafe を true にして、 {{% %}} タグを使うなどいろいろあるようだが、 {{< >}} と {{% %}} の二種類使うとややこしくなりそうなので、二種類使用するのは避けたい。

以下の対応をすることで、 markup.goldmark.renderer.unsafe は false のまま {{< >}} タグだけで実現できた。

• Markdown用のShortcodeを作成( markdownify.html )
• Markdownを記載したいときは、作成したShortcode markdownify を使う。
• Codeを記載したいときは、組み込みShortcode highlight を使う。

具体的な内容は以下のSampleに記載。

Shortcodeにパラメータを渡し、内部で以下の3つに分岐するする方法も考えたが、Markdownとhighlight両方一緒に使用できないためその方法はやめた。

{{- .Inner -}}

{{- .Inner | markdownify -}}

{{- highlight (trim .Inner "\n\r") $lang -}}

公式のドキュメントがHugoで作られているため、 hugoDocs と gohugoioTheme のリポジトリはかなり参考になる。

Sample

<div class="notices {{ .Get "class" }}">
  <div class="notices-label">{{ .Get "label" }}</div>
  <div class="notices-content">
    {{ .Inner }}
  </div>
</div>

<div class="notices {{ .Get "class" }}">
  <div class="notices-label">{{ .Get "label" }}</div>
  <div class="notices-content">
    {{ .Inner }}
  </div>
</div>

Sampleの記述

{{< notice class="note" label="Sample" >}}
{{< notice label="Highlight" >}}
{{< highlight go-html-template >}}
<div class="notices {{ .Get "class" }}">
  <div class="notices-label">{{ .Get "label" }}</div>
  <div class="notices-content">
    {{ .Inner }}
  </div>
</div>
{{< /highlight >}}
{{< /notice >}}

{{< notice label="Markdown" >}}
{{< markdownify >}}

### 太字
**bold**  

### リンク
[hugoDocs/content/en/content-management/shortcodes.md#L187-L193](https://github.com/gohugoio/hugoDocs/blob/0442f82649cca379d9132df0716afe8af4fa61a4/content/en/content-management/shortcodes.md?plain=1#L187-L193)  

### 引用(blockquote)
> a  
> b  
> c  

### CodeBlock
```go-html-template
<div class="notices {{ .Get "class" }}">
  <div class="notices-label">{{ .Get "label" }}</div>
  <div class="notices-content">
    {{ .Inner }}
  </div>
</div>
```

{{< /markdownify >}}
{{< /notice >}}
{{< /notice >}}

組み込みShortcode

highlight

{{ if len .Params | eq 2 }}{{ highlight (trim .InnerDeindent "\n\r") (.Get 0) (.Get 1) }}{{ else }}{{ highlight (trim .InnerDeindent "\n\r") (.Get 0) "" }}{{ end }}

自作Shortcode

markdownify

shortcodes/markdownify.html

{{- .Inner | markdownify -}}

notice

shortcodes/notice.html

<div class="notices {{ .Get "class" }}">
  <div class="notices-label">{{ .Get "label" }}</div>
  <div class="notices-content">
    {{ .Inner }}
  </div>
</div>

関連記事

• 【Hugo】Hugoの基本的な文法

  前提 Hugo: v0.125.4 変数 定義 {{ $foo := "foo" }} 代入 {{ $foo = "bar" }} テンプレート内での使用 <p>{{ $foo }}</p> 比較 Eq arg1 == arg2 {{ eq 1 1 }} # true {{ eq 1 2 }} # false {{ eq "foo" "foo" }} # true {{ eq "foo" "bar" }} # false 参考
• 【Hugo】Hugoの環境構築

  前提 環境: Windows Hugo: v0.125.4 インストール バイナリをダウンロードして配置 Githubからバイナリをダウンロード Releases latest ダウンロードしたファイルを解凍し、任意の
• 【Hugo】HugoでSass(SCSS)を使う

  前提 環境: Windows Hugo: v0.125.4 Dart Sassのインストール Hugo ExtendedにはLibSassが含まれているが、非推奨となっているため、Dart Sassをイン
• 【SCSS】StylelintとPrettierを使ってSCSSの自動整形

  Stylelint バージョン 16.4.0 インストール npm install --save-dev stylelint stylelint-config-standard-scss stylelint-config-recess-order 設定ファイル .stylelintrc.yaml extends: - stylelint-config-standard-scss - stylelint-config-recess-order - stylelint-prettier/recommended rules: block-no-empty: true no-duplicate-selectors: null Prettier バージョン 3.2.5 インストール npm install --save-dev prettier stylelint-prettier 設定ファイル .prettierrc.yaml tabWidth: 4 Style