title: "Markdown Test Page" description: "A page for testing common Markdown elements" date: 2026-07-27 tags: - markdown - testing draft: false

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

Paragraphs

This is a normal paragraph. It contains enough text to demonstrate line wrapping, spacing, font size, and readability on a typical blog page.

This is a second paragraph. A blank line separates it from the paragraph above.

This line ends with two spaces.
Therefore, this sentence begins on a new line without starting a new paragraph.

Inline Formatting

This text is bold.

This text is also bold.

This text is italic.

This text is also italic.

This text is bold and italic.

This text is ~~strikethrough~~.

This text contains inline code.

This sentence contains a highlighted section.

This sentence contains underlined text using HTML.

This is H₂O, and this is x².

Press Ctrl + C to copy.

You can also combine different formatting styles with code.

Escaped Characters

Use a backslash to display Markdown characters literally:

*This is not italic.*

# This is not a heading.

`This is not inline code.`

Images

Example placeholder image

Example image with a title

Linked Image

Image Using HTML

Blockquotes

This is a blockquote.

It can contain multiple paragraphs.

Blockquotes can contain bold text, italic text, and links.

Nested Blockquote

First level

Second level

Third level

Unordered Lists

First item
Second item
Third item

Alternative bullet characters:

Asterisk item
Another item

Plus-sign item
Another item

Nested Unordered List

Fruit
- Apple
- Banana
  - Cavendish
  - Plantain
Vegetables
- Carrot
- Potato

Ordered Lists

First step
Second step
Third step

Nested Ordered List

Install the application
1. Download the installer
2. Open the installer
Configure the application
1. Create an account
2. Choose your settings
Start using it

Automatically Numbered List

First item
Second item
Third item

Mixed List

Main item
- Supporting point
- Another point
Another main item
- Supporting point

Task List

Completed task
Another completed task
Incomplete task
Another incomplete task

Definition List

Term One : Definition for the first term.

Term Two : Definition for the second term.

: A term may have more than one definition.

Table

Name	Category	Price	Available
Alpha	Basic	$10.00	Yes
Beta	Standard	$25.00	Yes
Gamma	Premium	$50.00	No

Alignment is controlled with colons:

:--- aligns left
:---: aligns center
---: aligns right

Table With Formatting

Feature	Example	Notes
Bold	Important	Strong emphasis
Italic	Optional	Light emphasis
Code	`npm install`	Inline code
Link	Example	Clickable link
Escaped pipe	A \| B	Pipe inside a cell

Horizontal Rules

Three hyphens:

Three asterisks:

Three underscores:

Code

Inline code looks like const answer = 42;.

Plain Code Block

This is a plain code block.
No syntax highlighting is applied.

JavaScript

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

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

TypeScript

interface User {
  id: number;
  name: string;
  active: boolean;
}

const user: User = {
  id: 1,
  name: "Ada",
  active: true,
};

HTML

<article class="post">
  <h2>Article title</h2>
  <p>This is an article paragraph.</p>
</article>

CSS

.post {
  max-width: 70ch;
  margin-inline: auto;
  line-height: 1.7;
}

.post h2 {
  color: #243b53;
}

JSON

{
  "name": "Markdown Test",
  "published": true,
  "tags": ["markdown", "blog", "test"]
}

Shell

npm install
npm run dev

Diff

- const theme = "light";
+ const theme = "dark";

Footnotes

This sentence contains a footnote.[^1]

You can also use named footnotes.[^long-note]

[^1]: This is the first footnote.

[^long-note]: This is a longer footnote containing additional information.

Abbreviations

*[HTML]: HyperText Markup Language *[CSS]: Cascading Style Sheets

HTML provides structure, while CSS provides presentation.

Alerts or Callouts

[!NOTE] This is useful information that readers should know.

[!TIP] This is a helpful suggestion.

[!IMPORTANT] This information is especially important.

[!WARNING] This describes a potential risk.

[!CAUTION] This warns readers about a possible negative outcome.

Collapsible Section

Click to expand

This content is hidden until the section is opened.

It can contain lists.
It can contain formatted text.
It may support code blocks, depending on the renderer.

HTML Elements

This content is inside a custom HTML div.

This paragraph uses an inline HTML style.

This is an HTML blockquote with a citation attribute.

This is small-print text.

~~Deleted content~~ and inserted content.

Comments

The comment below should appear in the page source but not on the rendered page.

<! data-preserve-html-node="true"-- This is a hidden HTML comment. -->

Special Characters

Registered trademark: ®

Trademark: ™

Em dash: —

En dash: –

Ellipsis: …

Left and right quotes: “Hello”

Ampersand: &

Less than and greater than: <example>

Emoji

Native emoji: 🚀 ✨ 🎉 ❤️ 👍

Shortcode emoji, if supported: :rocket: :sparkles: :tada: :heart:

Mathematical Notation

Inline math, if supported: $E = mc^2$

Block math, if supported:

$$ a^2 + b^2 = c^2 $$

Mermaid Diagram

flowchart LR
    A[Write Markdown] --> B[Render Page]
    B --> C{Looks correct?}
    C -->|Yes| D[Publish]
    C -->|No| E[Adjust styles]
    E --> B

Nested Content

Heading Inside a Blockquote

First quoted item

Second quoted item
console.log("Code inside a blockquote");

Long Text and Inline Elements

A well-designed blog should comfortably display a long paragraph containing strong emphasis, subtle emphasis, inline code, a clickable link, ~~removed information~~, and words-with-very-long-hyphenated-sections so that wrapping behavior can be inspected across desktop and mobile layouts.

End of Test Page

That concludes the Markdown element test.

Return to the top