|
| 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