Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro.1
Headings
The following HTML <h1>—<h6> elements represent six levels of section headings. <h1> is the highest section level while <h6> is the lowest.
H1
H2
H3
H4
H5
H6
Paragraph
There’s a particular quality to reading text on a screen late at night. The letters feel closer somehow, more intimate, like someone whispering instead of speaking. You notice things you’d skip during the day — the way a comma forces you to pause, or how a semicolon stitches two thoughts together that could have lived apart. Typography is really just the art of making that experience invisible. When it’s working, you forget about the font entirely and just think about the words. When it’s not, every sentence feels like it’s fighting you.
The best typefaces have a kind of quiet confidence. They don’t demand attention but they reward it. You can stare at a well-set paragraph for a while and start to notice the little decisions — the slightly generous x-height, the way the descenders don’t crowd the line below, the serifs that guide your eye forward without grabbing it. It’s all in service of the same thing: keeping you reading.
Images
Output
This placeholder image demonstrates how descriptive alt text aids accessibility.2
Blockquotes
The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.
Blockquote without attribution
Output
Tiam, ad mint andaepu dandae nostion secatur sequo quae.
Note that you can use Markdown syntax within a blockquote.
Blockquote with attribution
Output
Don’t communicate by sharing memory, share memory by communicating.
— Rob Pike3
Tables
Output
| Italics | Bold | Code |
|---|---|---|
| italics | bold | code |
Code Blocks
Output
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>import { visit } from 'unist-util-visit';
export default function remarkHasMath() {
return (tree, file) => {
const astroData = file.data.astro ??= {};
const frontmatter = astroData.frontmatter ??= {};
let hasMath = false;
visit(tree, ['math', 'inlineMath'], () => {
hasMath = true;
return visit.EXIT;
});
frontmatter.hasMath = hasMath;
};
}List Types
Ordered List
Output
- First item
- Second item
- Third item
Unordered List
Output
- List item
- Another item
- And another item
Nested list
Output
- Fruit
- Apple
- Orange
- Banana
- Dairy
- Milk
- Cheese
Layered lists like this help organize hierarchies of ideas for readers.4
Other Elements — abbr, sub, sup, kbd, mark
Output
GIF is a bitmap image format.
H2O
Xn + Yn = Zn
Press CTRL + ALT + Delete to end the session.
Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.
Inline HTML elements such as these offer expressive formatting when Markdown alone is insufficient.5
This is an inline equation: and this is a block equation: