Writing Elements Showcase

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraphs & Basic Text

This is a regular paragraph. Text flows naturally to fill the container width. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

A second paragraph separated by a blank line. A single line break within the same block does not create a new paragraph — only a blank line does.

Bold text uses two asterisks.
Italic text uses one asterisk.
Bold and italic uses three asterisks.
~~Strikethrough~~ uses two tildes.
Inline code uses a backtick.

Combinations: bold with code inside and italic with ~~strikethrough~~ inside.

Links

Internal link to another page

External link to Astro

Link with a title attribute

Bare URL: https://astro.build

Email: hello@example.com

Blockquotes

This is a single-line blockquote.

A blockquote can also be long and span multiple sentences. Lorem ipsum dolor sit amet, consectetur adipiscing elit. This still belongs to the same quote block.

A second paragraph inside the same blockquote, separated by a blank line.

Nested blockquotes:

This is a blockquote inside a blockquote.

And this is one level deeper.

Blockquote with formatting inside:

A list item inside a blockquote

A second item

inline code works here too.

Lists

Unordered List

First item
Second item
Third item

List with sub-items:

Main item
- Sub-item one
- Sub-item two
  - Sub-sub-item
  - Another sub-sub-item
- Sub-item three
Another main item

Ordered List

First step
Second step
Third step

Ordered list with sub-items:

Item one
1. Sub-item 1.1
2. Sub-item 1.2
Item two
1. Sub-item 2.1
Item three

Task List

Completed task
This one is done too
Not yet started
Another pending task

List with Paragraphs

An item with a longer paragraph inside it.

A second paragraph for the same item. It needs 4-space indentation to remain part of this list item.
The next item.

A blockquote inside a list item.
Last item with inline code inside it.

Code

Inline Code

Run npm run dev to start the local server. The NODE_ENV variable must be set to production during build.

Code Block — No Language

This is a plain code block
with no syntax highlighting
third line

Code Block — With Language

npm create astro@latest
cd my-project
npm install
npm run dev

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

console.log(greet("World"));

interface Config {
  title: string;
  description?: string;
  lang: string;
}

const config: Config = {
  title: "My Site",
  lang: "en",
};

:root {
  --color-primary: #7c3aed;
  --color-text: #1e1e2e;
  --font-body: "Inter", sans-serif;
}

.container {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

{
  "name": "my-docs",
  "version": "1.0.0",
  "scripts": {
    "dev": "astro dev",
    "build": "astro build"
  }
}

Code Block with Title

export function formatDate(date) {
  return new Intl.DateTimeFormat("en-US", {
    dateStyle: "long",
  }).format(date);
}

---
const title = "Home";
---

<h1>{title}</h1>

Tables

Simple table:

Column One	Column Two	Column Three
Data A	Data B	Data C
Data D	Data E	Data F

Table with alignment:

Name	Type	Default
`title`	`string`	—
`description`	`string`	`""`
`draft`	`boolean`	`false`
`pubDate`	`Date`	today

Images

Showcase placeholder image

Image with a title (shown on hover):

Architecture diagram

Horizontal Rules

Three ways to write a divider — the result is identical:

Footnotes

This sentence has a footnote.¹

Footnotes can also be long and multi-paragraph.²

Escape Characters

Characters that need a backslash escape to avoid being processed by Markdown:

* asterisk * | _ underscore _ | ` backtick ` | \ backslash \

# hash | [ bracket ] | ( paren ) | { curly } | . period |

Native HTML

HTML elements that are valid inside Markdown:

Superscript: E = mc², xⁿ + yⁿ = zⁿ

Subscript: H₂O, CO₂

Keyboard: press Ctrl + K to search, Ctrl + Shift + I for DevTools.

Highlight: text with a highlighted section using the mark tag.

Click to expand

Content hidden by default. Can contain regular Markdown inside:

Item one
Item two

console.log("code inside details");

Expanded by default

The open attribute makes the content visible without clicking.

Combined Elements

Blockquote containing various content types:

Important note:

Blockquotes can contain almost any other element:

An ordered list inside

With formatting on each item
Terminal window
echo "code inside a blockquote"
A B

1 2

A	B
1	2

List with mixed content:

Item with bold text — followed by a plain explanation.
Item with inline code and italic text on the same line.
Item with a link: see the official documentation.
- Sub-item with a blockquote:
  
  A short quote inside a sub-item list.

Content of the first footnote. Can include formatting and code. ↩
Content of the second, longer footnote.

A second paragraph within the same footnote, indented with 4 spaces. ↩