Kitchen Sink

This is a standard paragraph with bold text, italic text, and bold italic together. You might also see strikethrough and inline code within a sentence. Sometimes you need a text link or even a visited link in the flow of things.

Here is a second paragraph to check spacing between blocks. Good typography needs breathing room. The quick brown fox jumps over the lazy dog. This sentence exists purely to add length so you can see how longer paragraphs feel at your chosen line width and line height.

Second Level Heading

Paragraphs after headings need proper spacing. This one follows an h2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Third Level Heading

This paragraph follows an h3. You want to make sure there is a clear visual hierarchy between heading levels without things feeling too cramped or too loose.

Fourth Level Heading

Most sites rarely go beyond h4 but it is good to have it styled just in case.

Asciinema

This is a demo of an embed.

Lists

Here is an unordered list:

• First item in the list
• Second item with a bit more text to see how wrapping behaves when a list item gets long enough to break onto a second line
• Third item
  • Nested item one
  • Nested item two
• Fourth item

Here is an ordered list:

1. First step
2. Second step with extra detail to test wrapping behavior across multiple lines in numbered lists
3. Third step
   1. Sub-step one
   2. Sub-step two
4. Fourth step

Blockquotes

This is a blockquote. It might be a pull quote, a citation, or just a callout. Make sure it looks distinct from body text without being obnoxious.

This is a multi-paragraph blockquote.

The second paragraph sits inside the same quote block. Some people also nest quotes:

A nested blockquote like this should still be readable.

Code

Inline code like const x = 42 should be distinguishable but not distracting.

A fenced code block:

function greet(name) {
  return `Hello, ${name}!`;
}

const message = greet("world");
console.log(message);

Tables

Images

Images with captions are trickier in markdown. Hugo shortcodes or a figure partial help there.

Horizontal Rules

The following is a horizontal rule:

Text continues after the rule. Make sure there is enough margin above and below.

Miscellaneous Inline Elements

Here is an abbreviation: HTML stands for HyperText Markup Language.

Here is a footnote reference¹.

Here is some text with a highlighted portion for emphasis.

Here is subscript and superscript for scientific or mathematical notation like H2O or E=mc2.

Definition Lists

Hugo supports definition lists through its markdown renderer:

Term one

Definition for term one. This explains what the term means.

Term two

Definition for term two. Sometimes definitions are long enough to wrap onto a second line.

Task Lists

• Completed task
• Another done item
• This one is still pending
• And this needs work too