aboutsummaryrefslogtreecommitdiffhomepage
path: root/docs/content/en/render-hooks
diff options
context:
space:
mode:
Diffstat (limited to 'docs/content/en/render-hooks')
-rwxr-xr-xdocs/content/en/render-hooks/blockquotes.md171
-rwxr-xr-xdocs/content/en/render-hooks/code-blocks.md4
-rwxr-xr-xdocs/content/en/render-hooks/headings.md8
-rwxr-xr-xdocs/content/en/render-hooks/images.md8
-rwxr-xr-xdocs/content/en/render-hooks/introduction.md3
-rwxr-xr-xdocs/content/en/render-hooks/links.md4
-rwxr-xr-xdocs/content/en/render-hooks/passthrough.md125
7 files changed, 313 insertions, 10 deletions
diff --git a/docs/content/en/render-hooks/blockquotes.md b/docs/content/en/render-hooks/blockquotes.md
new file mode 100755
index 000000000..e0eda5c51
--- /dev/null
+++ b/docs/content/en/render-hooks/blockquotes.md
@@ -0,0 +1,171 @@
+---
+title: Blockquote render hooks
+linkTitle: Blockquotes
+description: Create a blockquote render hook to override the rendering of Markdown blockquotes to HTML.
+categories: [render hooks]
+keywords: []
+menu:
+ docs:
+ parent: render-hooks
+ weight: 30
+weight: 30
+toc: true
+---
+
+{{< new-in 0.132.0 >}}
+
+## Context
+
+Blockquote render hook templates receive the following [context]:
+
+[context]: /getting-started/glossary/#context
+
+###### AlertType
+
+(`string`) Applicable when [`Type`](#type) is `alert`, this is the alert type converted to lowercase. See the [alerts](#alerts) section below.
+
+###### Attributes
+
+(`map`) The [Markdown attributes], available if you configure your site as follows:
+
+[Markdown attributes]: /content-management/markdown-attributes/
+
+{{< code-toggle file=hugo >}}
+[markup.goldmark.parser.attribute]
+block = true
+{{< /code-toggle >}}
+
+###### Ordinal
+
+(`int`) The zero-based ordinal of the blockquote on the page.
+
+###### Page
+
+(`page`) A reference to the current page.
+
+###### PageInner
+
+(`page`) A reference to a page nested via the [`RenderShortcodes`] method.
+
+[`RenderShortcodes`]: /methods/page/rendershortcodes
+
+###### Position
+
+(`string`) The position of the blockquote within the page content.
+
+###### Text
+(`string`) The blockquote text, excluding the alert designator if present. See the [alerts](#alerts) section below.
+
+###### Type
+
+(`bool`) The blockquote type. Returns `alert` if the blockquote has an alert designator, else `regular`. See the [alerts](#alerts) section below.
+
+## Examples
+
+In its default configuration, Hugo renders Markdown blockquotes according to the [CommonMark specification]. To create a render hook that does the same thing:
+
+[CommonMark specification]: https://spec.commonmark.org/current/
+
+{{< code file=layouts/_default/_markup/render-blockquote.html copy=true >}}
+<blockquote>
+ {{ .Text | safeHTML }}
+</blockquote>
+{{< /code >}}
+
+To render a blockquote as an HTML `figure` element with an optional citation and caption:
+
+{{< code file=layouts/_default/_markup/render-blockquote.html copy=true >}}
+<figure>
+ <blockquote {{ with .Attributes.cite }}cite="{{ . }}"{{ end }}>
+ {{ .Text | safeHTML }}
+ </blockquote>
+ {{ with .Attributes.caption }}
+ <figcaption class="blockquote-caption">
+ {{ . | safeHTML }}
+ </figcaption>
+ {{ end }}
+</figure>
+{{< /code >}}
+
+Then in your markdown:
+
+```text
+> Some text
+{cite="https://gohugo.io" caption="Some caption"}
+```
+
+## Alerts
+
+Also known as _callouts_ or _admonitions_, alerts are blockquotes used to emphasize critical information. For example:
+
+{{< code file=content/example.md lang=text >}}
+> [!NOTE]
+> Useful information that users should know, even when skimming content.
+
+> [!TIP]
+> Helpful advice for doing things better or more easily.
+
+> [!IMPORTANT]
+> Key information users need to know to achieve their goal.
+
+> [!WARNING]
+> Urgent info that needs immediate user attention to avoid problems.
+
+> [!CAUTION]
+> Advises about risks or negative outcomes of certain actions.
+{{< /code >}}
+
+
+{{% note %}}
+This syntax is compatible with the GitHub Alert Markdown extension.
+{{% /note %}}
+
+
+The first line of each alert is an alert designator consisting of an exclamation point followed by the alert type, wrapped within brackets.
+
+The blockquote render hook below renders a multilingual alert if an alert desginator is present, otherwise it renders a blockquote according to the CommonMark specification.
+
+{{< code file=layouts/_default/_markup/render-blockquote.html copy=true >}}
+{{ $emojis := dict
+ "caution" ":exclamation:"
+ "important" ":information_source:"
+ "note" ":information_source:"
+ "tip" ":bulb:"
+ "warning" ":information_source:"
+}}
+
+{{ if eq .Type "alert" }}
+ <blockquote class="alert alert-{{ .AlertType }}">
+ <p class="alert-heading">
+ {{ transform.Emojify (index $emojis .AlertType) }}
+ {{ or (i18n .AlertType) (title .AlertType) }}
+ </p>
+ {{ .Text | safeHTML }}
+ </blockquote>
+{{ else }}
+ <blockquote>
+ {{ .Text | safeHTML }}
+ </blockquote>
+{{ end }}
+{{< /code >}}
+
+To override the label, create these entries in your i18n files:
+
+{{< code-toggle file=i18n/en.toml >}}
+caution = 'Caution'
+important = 'Important'
+note = 'Note'
+tip = 'Tip'
+warning = 'Warning'
+{{< /code-toggle >}}
+
+
+Although you can use one template with conditional logic as shown above, you can also create separate templates for each [`Type`](#type) of blockquote:
+
+```text
+layouts/
+└── _default/
+ └── _markup/
+ ├── render-blockquote-alert.html
+ └── render-blockquote-regular.html
+```
diff --git a/docs/content/en/render-hooks/code-blocks.md b/docs/content/en/render-hooks/code-blocks.md
index 0c11c7864..d322cb88d 100755
--- a/docs/content/en/render-hooks/code-blocks.md
+++ b/docs/content/en/render-hooks/code-blocks.md
@@ -7,8 +7,8 @@ keywords: []
menu:
docs:
parent: render-hooks
- weight: 30
-weight: 30
+ weight: 40
+weight: 40
toc: true
---
diff --git a/docs/content/en/render-hooks/headings.md b/docs/content/en/render-hooks/headings.md
index c48bb11e1..8ae3b808a 100755
--- a/docs/content/en/render-hooks/headings.md
+++ b/docs/content/en/render-hooks/headings.md
@@ -7,8 +7,8 @@ keywords: []
menu:
docs:
parent: render-hooks
- weight: 40
-weight: 40
+ weight: 50
+weight: 50
toc: true
---
@@ -24,7 +24,9 @@ Heading render hook templates receive the following [context]:
###### Attributes
-(`map`) The Markdown attributes, available if you configure your site as follows:
+(`map`) The [Markdown attributes], available if you configure your site as follows:
+
+[Markdown attributes]: /content-management/markdown-attributes/
{{< code-toggle file=hugo >}}
[markup.goldmark.parser.attribute]
diff --git a/docs/content/en/render-hooks/images.md b/docs/content/en/render-hooks/images.md
index 2d9b5e2e5..1638ceeae 100755
--- a/docs/content/en/render-hooks/images.md
+++ b/docs/content/en/render-hooks/images.md
@@ -7,8 +7,8 @@ keywords: []
menu:
docs:
parent: render-hooks
- weight: 50
-weight: 50
+ weight: 60
+weight: 60
toc: true
---
@@ -32,7 +32,9 @@ Image render hook templates receive the following context:
###### Attributes
-(`map`) The Markdown attributes, available if you configure your site as follows:
+(`map`) The [Markdown attributes], available if you configure your site as follows:
+
+[Markdown attributes]: /content-management/markdown-attributes/
{{< code-toggle file=hugo >}}
[markup.goldmark.parser]
diff --git a/docs/content/en/render-hooks/introduction.md b/docs/content/en/render-hooks/introduction.md
index 8268b2ec7..3745fc398 100755
--- a/docs/content/en/render-hooks/introduction.md
+++ b/docs/content/en/render-hooks/introduction.md
@@ -13,10 +13,12 @@ weight: 20
When rendering Markdown to HTML, render hooks override the conversion. Each render hook is a template, with one template for each supported element type:
+- [Blockquotes](/render-hooks/blockquotes)
- [Code blocks](/render-hooks/code-blocks)
- [Headings](/render-hooks/headings)
- [Images](/render-hooks/images)
- [Links](/render-hooks/links)
+- [Passthrough elements](/render-hooks/passthrough)
{{% note %}}
Hugo supports multiple [content formats] including Markdown, HTML, AsciiDoc, Emacs Org Mode, Pandoc, and reStructuredText.
@@ -54,6 +56,7 @@ Each render hook is a template, with one template for each supported element typ
layouts/
└── _default/
└── _markup/
+ ├── render-blockquote.html
├── render-codeblock.html
├── render-heading.html
├── render-image.html
diff --git a/docs/content/en/render-hooks/links.md b/docs/content/en/render-hooks/links.md
index bf0485068..79c3d6926 100755
--- a/docs/content/en/render-hooks/links.md
+++ b/docs/content/en/render-hooks/links.md
@@ -7,8 +7,8 @@ keywords: []
menu:
docs:
parent: render-hooks
- weight: 60
-weight: 60
+ weight: 70
+weight: 70
toc: true
---
diff --git a/docs/content/en/render-hooks/passthrough.md b/docs/content/en/render-hooks/passthrough.md
new file mode 100755
index 000000000..3b82116e6
--- /dev/null
+++ b/docs/content/en/render-hooks/passthrough.md
@@ -0,0 +1,125 @@
+---
+title: Passthrough render hooks
+linkTitle: Passthrough
+description: Create a passthrough render hook to override the rendering of text snippets captured by the Goldmark passthrough extension.
+categories: [render hooks]
+keywords: []
+menu:
+ docs:
+ parent: render-hooks
+ weight: 80
+weight: 80
+toc: true
+---
+
+{{< new-in 0.132.0 >}}
+
+## Overview
+
+Hugo uses [Goldmark] to render Markdown to HTML. Goldmark supports custom extensions to extend its core functionality. The Goldmark [passthrough extension] captures and preserves raw Markdown within delimited snippets of text, including the delimiters themselves. These are known as _passthrough elements_.
+
+[Goldmark]: https://github.com/yuin/goldmark
+[passthrough extension]: /getting-started/configuration-markup/#passthrough
+
+Depending on your choice of delimiters, Hugo will classify a passthrough element as either _block_ or _inline_. Consider this contrived example:
+
+{{< code file=content/sample.md >}}
+This is a
+
+\[block\]
+
+passthrough element with opening and closing block delimiters.
+
+This is an \(inline\) passthrough element with opening and closing inline delimiters.
+{{< /code >}}
+
+Update your site configuration to enable the passthrough extension and define opening and closing delimiters for each passthrough element type, either `block` or `inline`. For example:
+
+{{< code-toggle file=hugo >}}
+[markup.goldmark.extensions.passthrough]
+enable = true
+[markup.goldmark.extensions.passthrough.delimiters]
+block = [['\[', '\]'], ['$$', '$$']]
+inline = [['\(', '\)']]
+{{< /code-toggle >}}
+
+In the example above there are two sets of `block` delimiters. You may use either one in your Markdown.
+
+The Goldmark passthrough extension is often used in conjunction with the MathJax or KaTeX display engine to render [mathematical expressions] written in [LaTeX] or [Tex].
+
+[mathematical expressions]: /content-management/mathematics/
+[LaTeX]: https://www.latex-project.org/
+[Tex]: https://en.wikipedia.org/wiki/TeX
+
+To enable custom rendering of passthrough elements, create a render hook.
+
+## Context
+
+Passthrough render hook templates receive the following [context]:
+
+[context]: /getting-started/glossary/#context
+
+###### Attributes
+
+(`map`) The [Markdown attributes], available if you configure your site as follows:
+
+[Markdown attributes]: /content-management/markdown-attributes/
+
+{{< code-toggle file=hugo >}}
+[markup.goldmark.parser.attribute]
+block = true
+{{< /code-toggle >}}
+
+Hugo populates the `Attributes` map for _block_ passthrough elements. Markdown attributes are not applicable to _inline_ elements.
+
+###### Inner
+(`string`) The inner content of the passthrough element, excluding the delimiters.
+
+###### Ordinal
+
+(`int`) The zero-based ordinal of the passthrough element on the page.
+
+###### Page
+
+(`page`) A reference to the current page.
+
+###### PageInner
+
+(`page`) A reference to a page nested via the [`RenderShortcodes`] method. [See details](#pageinner-details).
+
+[`RenderShortcodes`]: /methods/page/rendershortcodes
+
+###### Position
+
+(`string`) The position of the passthrough element within the page content.
+
+###### Type
+
+(`bool`) The passthrough element type, either `block` or `inline`.
+
+## Example
+
+As an alternative to rendering mathematical expressions with the MathJax or KaTeX display engine, create a passthrough render hook which calls the [`transform.ToMath`] function:
+
+[`transform.ToMath`]: /functions/transform/tomath/
+
+{{< code file=layouts/_default/_markup/render-passthrough.html copy=true >}}
+{{ if eq .Type "block" }}
+ {{ $opts := dict "displayMode" true }}
+ {{ transform.ToMath .Inner $opts }}
+{{ else }}
+ {{ transform.ToMath .Inner }}
+{{ end }}
+{{< /code >}}
+
+Although you can use one template with conditional logic as shown above, you can also create separate templates for each [`Type`](#type) of passthrough element:
+
+```text
+layouts/
+└── _default/
+ └── _markup/
+ ├── render-passthrough-block.html
+ └── render-passthrough-inline.html
+```
+
+{{% include "/render-hooks/_common/pageinner.md" %}}