I love the simplicity of creating new content using markdown inHugo. But sometimes, markdown is not enough – you mightwant to do a one-off extra-fancy thing with raw html.
Archie - Hugo theme. Archie is a minimal and clean theme for hugo with a markdown-ish UI. Forked from Ezhil Theme. Check the Demo hosted on GitHub Pages:smile:. You can find the source code to that in the site branch of this repository. Hugo can also order lists of content by linktitle. Markup experimental; specify 'rst' for reStructuredText (requiresrst2html) or 'md' (default) for Markdown. Outputs allows you to specify output formats specific to the content. See output formats. PublishDate if in the future, content will not be rendered unless the -buildFuture flag is passed. Hugo will render every Markdown file provided with a corresponding single template.
Surprisingly, Hugo doesn’t seem to have a good way to let you do this in acontent file. Here is how to create your own one-line custom shortcode to makethat possible.
Add a shortcode template to your site, in layouts/shortcodes/rawhtml.html, withthe content: Valla counters.
This template tells Hugo to simply render the inner content passed to yourshortcode directly into the HTML of your site.
You can then use this shortcode in your markdown content, like so:
I’ve been looking for a way to add captions to markdown images without falling back to raw HTML. It turns out Hugo supports this with render hooks.
After writing markdown for the past five years, I’ve only recently learned that the spec has a way to specify a title attribute for images.
Which renders:
Using the alt text would work too, but I prefer to keep the alt text objective, and use the title attribute for additional flavor.
For example, the alt text of the image below is “A picture of my dog sleeping with a ray of sun shining on his face”, an objective description of the image. The caption adds more context.
Hugo has a lesser-known feature called markdown render hooks. They’re only available if you’re using the Goldmark renderer, Goldmark has been the default for a while that’s the default, so chances are you already are.
Markdown render hooks allow you to take full control of how an image, link or heading is rendered. We’re only going to look into images now.
To override the generic image output, you can create a new template for your site’s images. Hugo will look for an image template in layouts/_default/_markup/render-image.html.
The default template looks something like this: Sims medieval mods.
It always includes src and alt attributes, and adds a title if one was specified.
For our captions, we’ll extract the title, and wrap everything inside a figure tag.
The title tag will now be used as the figcaption instead.
If the image doesn’t have a title, it doesn’t really make sense to wrap it in a figure tag, so we’ll add a check first.
Our site now supports image captions!
Hugo Static Site Generator
Markdown render hooks are a powerful idea, you could also use them to ensure all images are wrapped in p tags, or to add an additional class to images, links or headings. I’ll leave the possibilities to your imagination!