Skip to content

Commit 2f793d3

Browse files
jmooringbep
authored andcommitted
Document passthrough render hooks
1 parent a7ce9a5 commit 2f793d3

File tree

3 files changed

+126
-3
lines changed

3 files changed

+126
-3
lines changed

content/en/functions/transform/ToMath.md

-3
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,3 @@ There are 3 ways to handle errors from KaTeX:
112112
[options]: #options
113113
[error handling]: #error-handling
114114
[KaTeX options]: https://katex.org/docs/options.html
115-
116-
117-

content/en/render-hooks/introduction.md

+1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ When rendering Markdown to HTML, render hooks override the conversion. Each rend
1818
- [Headings](/render-hooks/headings)
1919
- [Images](/render-hooks/images)
2020
- [Links](/render-hooks/links)
21+
- [Passthrough elements](/render-hooks/passthrough)
2122

2223
{{% note %}}
2324
Hugo supports multiple [content formats] including Markdown, HTML, AsciiDoc, Emacs Org Mode, Pandoc, and reStructuredText.
+125
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
---
2+
title: Passthrough render hooks
3+
linkTitle: Passthrough
4+
description: Create a passthrough render hook to override the rendering of text snippets captured by the Goldmark passthrough extension.
5+
categories: [render hooks]
6+
keywords: []
7+
menu:
8+
docs:
9+
parent: render-hooks
10+
weight: 80
11+
weight: 80
12+
toc: true
13+
---
14+
15+
{{< new-in 0.132.0 >}}
16+
17+
## Overview
18+
19+
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_.
20+
21+
[Goldmark]: https://github.com/yuin/goldmark
22+
[passthrough extension]: /getting-started/configuration-markup/#passthrough
23+
24+
Depending on your choice of delimiters, Hugo will classify a passthrough element as either _block_ or _inline_. Consider this contrived example:
25+
26+
{{< code file=content/sample.md >}}
27+
This is a
28+
29+
\[block\]
30+
31+
passthrough element with opening and closing block delimiters.
32+
33+
This is an \(inline\) passthrough element with opening and closing inline delimiters.
34+
{{< /code >}}
35+
36+
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:
37+
38+
{{< code-toggle file=hugo >}}
39+
[markup.goldmark.extensions.passthrough]
40+
enable = true
41+
[markup.goldmark.extensions.passthrough.delimiters]
42+
block = [['\[', '\]'], ['$$', '$$']]
43+
inline = [['\(', '\)']]
44+
{{< /code-toggle >}}
45+
46+
In the example above there are two sets of `block` delimiters. You may use either one in your Markdown.
47+
48+
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].
49+
50+
[mathematical expressions]: /content-management/mathematics/
51+
[LaTeX]: https://www.latex-project.org/
52+
[Tex]: https://en.wikipedia.org/wiki/TeX
53+
54+
To enable custom rendering of passthrough elements, create a render hook.
55+
56+
## Context
57+
58+
Passthrough render hook templates receive the following [context]:
59+
60+
[context]: /getting-started/glossary/#context
61+
62+
###### Attributes
63+
64+
(`map`) The [Markdown attributes], available if you configure your site as follows:
65+
66+
[Markdown attributes]: /content-management/markdown-attributes/
67+
68+
{{< code-toggle file=hugo >}}
69+
[markup.goldmark.parser.attribute]
70+
block = true
71+
{{< /code-toggle >}}
72+
73+
Hugo populates the `Attributes` map for _block_ passthrough elements. Markdown attributes are not applicable to _inline_ elements.
74+
75+
###### Inner
76+
(`string`) The inner content of the passthrough element, excluding the delimiters.
77+
78+
###### Ordinal
79+
80+
(`int`) The zero-based ordinal of the passthrough element on the page.
81+
82+
###### Page
83+
84+
(`page`) A reference to the current page.
85+
86+
###### PageInner
87+
88+
(`page`) A reference to a page nested via the [`RenderShortcodes`] method. [See details](#pageinner-details).
89+
90+
[`RenderShortcodes`]: /methods/page/rendershortcodes
91+
92+
###### Position
93+
94+
(`string`) The position of the passthrough element within the page content.
95+
96+
###### Type
97+
98+
(`bool`) The passthrough element type, either `block` or `inline`.
99+
100+
## Example
101+
102+
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:
103+
104+
[`transform.ToMath`]: /functions/transform/tomath/
105+
106+
{{< code file=layouts/_default/_markup/render-passthrough.html copy=true >}}
107+
{{ if eq .Type "block" }}
108+
{{ $opts := dict "displayMode" true }}
109+
{{ transform.ToMath .Inner $opts }}
110+
{{ else }}
111+
{{ transform.ToMath .Inner }}
112+
{{ end }}
113+
{{< /code >}}
114+
115+
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:
116+
117+
```text
118+
layouts/
119+
└── _default/
120+
└── _markup/
121+
├── render-passthrough-block.html
122+
└── render-passthrough-inline.html
123+
```
124+
125+
{{% include "/render-hooks/_common/pageinner.md" %}}

0 commit comments

Comments
 (0)