Basic syntax
Headings
Create headings using hash symbols:Paragraphs
Separate paragraphs with a blank line:Emphasis
Add emphasis with asterisks or underscores:- Italic text
- Bold text
- Bold and italic
Lists
Create unordered lists with hyphens, asterisks, or plus signs:Links
Create links using bracket and parenthesis syntax:Images
Insert images using similar syntax to links, with a leading exclamation mark:Extended syntax
Blockquotes
Create blockquotes with the greater-than symbol:Q: Do the benefits of artificial intelligence outweigh the risks?The late physicist Stephen Hawking warned that artificial intelligence (AI) was “either the best or the worst thing ever to happen to humanity”.
Code blocks
Create inline code with backticks:Horizontal rules
Create horizontal rules with three or more hyphens, asterisks, or underscores:Hugo-specific features
Shortcodes
Hugo provides shortcodes for enhanced functionality. The Congo theme includes several built-in shortcodes.Figure shortcode
YouTube shortcode
Tweet shortcode
Content summaries
Hugo can automatically generate summaries from your content. Use the<!--more--> comment to manually specify where the summary should end:
Congo theme features
The Congo theme extends Hugo’s capabilities with additional styling and features.Automatic table of contents
Congo can automatically generate a table of contents from your headings. This is configured in your site’s configuration files.Syntax highlighting
Congo supports syntax highlighting for code blocks. Specify the language after the opening backticks:- JavaScript/TypeScript
- Python
- Go
- Rust
- HTML/CSS
- Bash/Shell
- And many more
Responsive images
Images in Congo are automatically optimized and made responsive for different screen sizes.Best practices
When should I use HTML instead of Markdown?
When should I use HTML instead of Markdown?
While Hugo supports inline HTML in Markdown files, it’s best to stick with Markdown syntax for portability and simplicity. Use HTML only when you need specific styling or functionality that Markdown doesn’t provide.
How do I add custom classes or IDs to elements?
How do I add custom classes or IDs to elements?
Hugo supports attribute lists for Markdown elements. You can add classes and IDs using the syntax
{.class #id} after certain elements. However, this feature depends on your Markdown renderer configuration.Can I include tables in my posts?
Can I include tables in my posts?
Yes! Hugo supports GitHub Flavored Markdown (GFM) tables:
What's the difference between code blocks and shortcodes?
What's the difference between code blocks and shortcodes?
Code blocks display code as text content, while shortcodes are processed by Hugo to generate HTML output. Use code blocks to show code examples and shortcodes to embed interactive content like videos or tweets.
Writing tips
- Use headings hierarchically (don’t skip levels)
- Keep paragraphs focused on a single idea
- Use lists to break up dense information
- Add alt text to images for accessibility
- Use code blocks for any code or command examples
- Preview your content locally before publishing