Markdown Syntax Test

This document is a playground for testing Markdown rendering. It intentionally includes many edge cases and visual patterns.

Jump to tables · Jump to code · Jump to MDC

Paragraphs And Line Breaks

This is a normal paragraph. It contains enough text to wrap across multiple lines so spacing, line height, and width can be inspected in the renderer.

This is another paragraph after a blank line.

This line ends with two spaces.
This should render as a soft line break.

This line uses an HTML break.
This should also appear on the next line.

Inline Formatting

This sentence has bold text, italic text, bold italic text, strikethrough text, inline code, and a normal link.

Autolinks should work too: https://example.com and hello@example.com.

Escaped characters: *not italic*, # not a heading, [not a link].

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Blockquotes

This is a simple blockquote.

This is a multi-paragraph blockquote.

It has a second paragraph.

Nested blockquote:

This is nested one level deeper.

This is nested two levels deeper.

Blockquote with formatting:

• Bold list item
• inline code
• A link

Custom Containers

Lists

Unordered Lists

• First item
• Second item
  • Nested item A
  • Nested item B
    • Deep nested item
• Third item

• Asterisk item
• Another asterisk item

• Plus item
• Another plus item

Ordered Lists

1. First ordered item
2. Second ordered item
3. Third ordered item
4. Numbering can all be one.
5. Markdown should still render it correctly.
6. Useful for editing.

Mixed Lists

1. Ordered item
   • Nested unordered item
   • Another nested unordered item
2. Another ordered item
   1. Nested ordered item
   2. Another nested ordered item

Task Lists

• Completed task
• Incomplete task
• Task with bold text
• Task with inline code

Tables

Code Blocks

Inline code: const answer = 42.

Indented code:

const indented = true
console.log(indented)

Plain fenced code:

No language here.
Just plain text.

TypeScript:

console.log("hello")

JavaScript with filename:

export default defineComponent({})

type Post = {
  title: string
  tags: string[]
  draft?: boolean
}

const post: Post = {
  title: 'Markdown Syntax Test',
  tags: ['markdown', 'nuxt-content'],
}

Code with Line Numbers:

function calculateSum(a, b) {
  const result = a + b;
  console.log("Sum:", result);
  return result;
}

Line Numbers with Filename:

const sum = (a: number, b: number) => a + b

Line Numbers with Start:

console.log("first visible line")
console.log("second visible line")

Vue:

<script setup lang="ts">
const message = 'Hello Markdown'
</script>

<template>
  <p>{{ message }}</p>
</template>

Bash:

npm run dev
npm run build

Diff:

- const oldTheme = 'light'
+ const newTheme = 'dark'

JSON:

{
  "title": "Markdown Syntax Test",
  "draft": true,
  "tags": ["Markdown", "Nuxt Content"]
}

Code Group (Nuxt Content MDC):

npm install

yarn install

pnpm install

Horizontal Rules

Three hyphens:

Three asterisks:

Three underscores:

Images

Local image:

Image with title:

Linked image:

Markdown Image Width Tests

Plain Markdown image:

Markdown image with Nuxt MDC width and height attributes:

Markdown image with class attributes:

Markdown image with Tailwind arbitrary width class:

Wide Markdown image:

Wide Markdown image constrained by class:

Markdown linked image:

Missing image:

Missing image with title:

Missing image with explicit size:

Links

Inline link: Nuxt

Reference link: Nuxt Content

Another reference link: Example

Footnotes

Here is a sentence with a footnote.¹

Here is another footnote with more text.²

HTML

+

Highlighted text using HTML mark.

Inline HTML span with custom color.

Escaping And Entities

HTML entities: © — → <div>

Backslash escaping:

`not code`

**not bold**

Definition-Like Text

Term : Definition syntax may or may not be supported depending on the Markdown parser.

Another Term : Another definition body.

Math-Like Text

Inline math-like text: $E = mc^2$

Block math-like text:

$$ E = mc^2 $$

This section is here to verify whether math is supported or rendered as plain text.

Nuxt Content MDC

The following syntax tests Nuxt Content MDC. Rendering depends on available components.

Long Content

This section intentionally adds repeated paragraphs so scroll behavior, anchors, and table of contents behavior can be tested.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus, justo vitae aliquet porta, lectus augue blandit nisl, vitae tempor ipsum arcu a erat.

Praesent commodo, magna vitae ullamcorper tristique, ipsum nibh efficitur justo, id volutpat sem ex nec massa.

Curabitur posuere sapien ut ipsum luctus, sed feugiat mi porta. Donec feugiat, magna id dignissim dictum, velit mi rhoncus ipsum, vitae aliquet sapien augue sit amet odio.

Final Section

If anchor links work correctly, clicking a heading anchor above should not unexpectedly jump here.

End of test document.