Articles
Diagrams
Use a fenced code block to embed an SVG image of a diagram in your Hugo site.
Markdown attributes
Hugo supports Markdown attributes on images and block-level elements including blockquotes, fenced code blocks, headings, lists, paragraphs, and tables.
Link and image render hooks
Use Hugo’s render hooks to accurately resolve Markdown link and image destinations. This approach solves one of the most common problems encountered by site and content authors.
Tables of content
Insert a table of contents into pages on your Hugo site using one of four methods. Each method has advantages and disadvantages.
Embed PeerTube videos
Embed PeerTube videos in your Hugo site.
Embed Mastodon posts
Embed Mastodon posts in your Hugo site.
Syntax highlighting for GitHub files
Syntactically highlight a file stored in any public GitHub repository using a Hugo shortcode.
Images with overlays
Create a composite of two images using Hugo’s overlay image filter, typically for watermarking or "frame within a frame" applications.
Working with raw Markdown
Recursively convert a directory of raw Markdown files to Markdown with front matter.
Supplemental math functions
Hugo provides a robust set of built-in math functions, but in some scenarios you might need more.
Logical operators
Simplify your Hugo templates with logical operators. They do more than you think.
Internal link validation
Document authors include links to related content within a project. While useful and necessary for document consumers, internal links are prone to breakage as the project changes over time.
Mathematical expressions
Use a fenced code block or shortcode to embed an SVG image of a LaTeX mathematical expression or equation in your Hugo site.
Code block line numbers
Hugo gives you three options in relation to line numbering with code samples. Learn how to create a consistent appearance regardless of method.
Working with CSV files
Use a CSV file as a data source for your Hugo site, and automatically create tables without using Markdown.
Parsing URLs
When working with URLs in your Hugo templates, the urls.Parse function provides direct access to any of the URL components.
Syntax highlighting styles
Hugo performs syntax highlighting when rendering code samples from Markdown. Customize the appearance with either inline styling or an external style sheet.
Knowledge map
Building a site with Hugo requires knowledge of HTML, CSS, Markdown, data formats, media, source control, and hosting options.
Working with time
Use Hugo’s time function to convert, format, localize, parse, compare, and manipulate dates and times.
Code owners
Hugo can natively parse a CODEOWNERS file in your Git repository, and then retrieve user information directly from GitHub or GitLab.