Introduction

An introduction to Hugo's render hooks.

When rendering Markdown to HTML, render hooks override the conversion. Each render hook is a template, with one template for each supported element type:

For example, consider this Markdown:

[Hugo](https://gohugo.io)

![kitten](kitten.jpg)

Without link or image render hooks, this example above is rendered to:

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

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

layouts/
└── _default/
    └── _markup/
        ├── render-blockquote.html
        ├── render-codeblock.html
        ├── render-heading.html
        ├── render-image.html
        ├── render-link.html
        ├── render-passthrough.html
        └── render-table.html

The template lookup order allows you to create different render hooks for each page [type], [kind], language, and [output format]. For example:

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

The remaining pages in this section describe each type of render hook, including examples and the context received by each template.