1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
---
title: Introduction
description: An introduction to Hugo's render hooks.
categories: [render hooks]
keywords: []
menu:
docs:
identifier: render-hooks-introduction
parent: render-hooks
weight: 20
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.
The render hook capability is limited to Markdown. You cannot create render hooks for the other content formats.
[content formats]: /content-management/formats/
{{% /note %}}
For example, consider this Markdown:
```text
[Hugo](https://gohugo.io)
```
Without link or image render hooks, this example above is rendered to:
```html
<p><a href="https://gohugo.io">Hugo</a></p>
<p><img alt="kitten" src="kitten.jpg"></p>
```
By creating link and image render hooks, you can alter the conversion from Markdown to HTML. For example:
```html
<p><a href="https://gohugo.io" rel="external">Hugo</a></p>
<p><img alt="kitten" src="kitten.jpg" width="600" height="400"></p>
```
Each render hook is a template, with one template for each supported element type:
```text
layouts/
└── _default/
└── _markup/
├── render-blockquote.html
├── render-codeblock.html
├── render-heading.html
├── render-image.html
└── render-link.html
```
The template lookup order allows you to create different render hooks for each page [type], [kind], language, and [output format]. For example:
```text
layouts/
├── _default/
│ └── _markup/
│ ├── render-link.html
│ └── render-link.rss.xml
├── books/
│ └── _markup/
│ ├── render-link.html
│ └── render-link.rss.xml
└── films/
└── _markup/
├── render-link.html
└── render-link.rss.xml
```
[kind]: /getting-started/glossary/#page-kind
[output format]: /getting-started/glossary/#output-format
[type]: /getting-started/glossary/#content-type
The remaining pages in this section describe each type of render hook, including examples and the context received by each template.
|
