Introduction

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

layouts/
├── _default/
│   └── _markup/
│       ├── render-link.html
│       └── render-link.text.txt
├── books/
│   └── _markup/
│       ├── render-link.html
│       └── render-link.text.txt
└── films/
    └── _markup/
        ├── render-link.html
        └── render-link.text.txt

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

Last updated: February 11, 2024: Capitalize the word Markdown throughout the documentation (c36d20d3)