Lorem ipsum dolor sit amet, consectetur adipiscing elit. This post exercises every piece of Markdown and MDX syntax the blog renders, so the typography, code blocks and components can be checked in one place.

Headings

Lorem ipsum dolor sit amet, consectetur adipiscing elit. The table of contents is built from the H2 and H3 headings of this page.

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5

Heading level 6

Paragraphs and line breaks

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, after a hard break.

Text styling

Lorem ipsum bold text dolor sit amet, italic text consectetur, bold and italic adipiscing elit, strikethrough sed do eiusmod, and inline code tempor incididunt.

Press Ctrl + K to lorem ipsum. Water is H₂O and the area is 10 m². Lorem ipsum highlighted text dolor sit amet.

Links

Inline and reference links

Lorem ipsum an inline link dolor sit amet, a reference link consectetur adipiscing elit, and a bare URL https://example.com/bare in the middle of a sentence.

Anchors and external links

Jump to the code section on this page, or open an external link that opens in a new tab.

Lists

Unordered and ordered lists

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Sed do eiusmod tempor

3. Lorem ipsum dolor sit amet
4. Consectetur adipiscing elit
5. Sed do eiusmod tempor

Nested and mixed lists

• Level one lorem
  • Level two ipsum
    • Level three dolor
    • Level three sit
  • Level two amet
• Level one consectetur

1. Ordered lorem
   • Unordered ipsum inside ordered
   • Unordered dolor inside ordered
2. Ordered consectetur
   1. Nested ordered adipiscing
   2. Nested ordered elit

Task list

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Sed do eiusmod tempor
• Ut labore et dolore magna aliqua

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet.

Nested quote: consectetur adipiscing elit, sed do eiusmod tempor.

Third level: ut enim ad minim veniam.

A quote with a list and code:

• Lorem ipsum dolor
• Sit amet consectetur

const lorem: string = "ipsum";

Code

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Each fenced block below is highlighted for both the light and the dark theme.

Languages

export function add(a: number, b: number): number {
  return a + b;
}

type GreetingProps = { name: string };
 
export function Greeting({ name }: GreetingProps) {
  return <p className="font-medium">Lorem ipsum, {name}</p>;
}

pnpm install
pnpm build --filter lorem

{
  "name": "lorem-ipsum",
  "version": "1.0.0",
  "tags": ["dolor", "sit", "amet"]
}

SELECT id, title
FROM posts
WHERE draft = false
ORDER BY date DESC
LIMIT 10;

- const lorem = "ipsum";
+ const lorem = "dolor";
  const sit = "amet";

Lorem ipsum dolor sit amet
consectetur adipiscing elit

Title, line numbers and highlights

export const dolor = "sit";
export const amet = "consectetur";

const lorem = 1;
const ipsum = 2;
const dolor = 3;
const sit = 4;

const lorem = 1;
const ipsum = 2;
const dolor = 3;
const sit = 4;

const lorem = "ipsum";
const dolor = "ipsum dolor";

A very long line

const loremIpsum = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";

Tables

Alignment

Inline code and links in cells

A wide table

Horizontal rule

Lorem ipsum dolor sit amet, above the rule.

Consectetur adipiscing elit, below the rule.

Images

A Markdown image:

An image component with a caption:

Footnotes

Lorem ipsum dolor sit amet¹, consectetur adipiscing elit, sed do eiusmod tempor² incididunt ut labore.

HTML in MDX

MDX components

Diagrams (Mermaid)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. A flowchart with one decision, written as a fenced mermaid block.

graph TD
  A[Draft post] --> B{Reviewed?}
  B -->|Yes| C[Publish post]
  B -->|No| D[Request changes]
  D --> A
  C --> E[Share link]

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A sequence diagram with three participants.

sequenceDiagram
  participant Reader
  participant Blog
  participant Renderer
  Reader->>Blog: Open the post
  Blog->>Renderer: Request the diagram
  Renderer-->>Blog: Return the SVG
  Blog-->>Reader: Show the post

Ut enim ad minim veniam, quis nostrud exercitation ullamco. A pie chart passed straight to the component.

pie title Time spent by phase
"Writing" : 45
"Reviewing" : 35
"Publishing" : 20

Duis aute irure dolor in reprehenderit in voluptate velit esse. The next block is deliberately invalid, so the source is shown with an error note.

diagramm TD
  A --> B

Edge cases

Long unbroken text

Loremipsumdolorsitametconsecteturadipiscingelitseddoeiusmodtemporincididuntutlaboreetdoloremagnaaliquautenimadminimveniamquisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat

https://example.com/lorem/ipsum/dolor/sit/amet/consectetur/adipiscing/elit/sed/do/eiusmod/tempor/incididunt/ut/labore/et/dolore/magna/aliqua?query=lorem&another=ipsum&yet-another=dolor

Vietnamese diacritics

Tiếng Việt: ă â đ ê ô ơ ư ế ợ ữ