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 H2O, and this is x2.
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.`
Links
<https: data-preserve-html-node="true"//example.com>
<hello@example.com data-preserve-html-node="true">
This is a reference-style link.
Internal Link
Images
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
- Download the installer
- Open the installer
- Configure the application
- Create an account
- 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 devDiff
- 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 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
Copyright: ©
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 --> BNested 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.