Demo Page

Publié le :2026-04-23 · Édité le :2026-04-23 · Tags : Markdown, Tech

#Markdown

Text can be bold, italic, strikethrough, and all at the same time.

There should be whitespace between paragraphs¹.

#Heading 1

#Heading 2

#Heading 3

#Heading 4

#Heading 5

#Heading 6

This is a normal paragraph² following a header.

😭😂🥺🤣❤️✨🙏😍🥰😊

Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.

"Original content is original only for a few seconds before getting old"

Rule #21 of the internet

• Item 1
• Item 2
  • Item 2.1
  • Item 2.2
• Item 3
• Item 4

1. Perform step #1
2. Proceed to step #2
3. Conclude with step #3

• Milk
• Eggs
• Flour
• Coffee
• Combustible lemons

Mare	Rating	Additional info
Fluttershy	Best pone	Shy and adorable
Apple Jack	Good pone	Honest and nice
Pinkie Pie	Fun pone	Parties and ADHD
Twilight	Main pone	Neeerd
Rainbow Dash	Yes	Looks badass
Rarity	Fancy pone	Generous
Derpy Hooves	M u f f i n s	[REDACTED]

let highlight = true;

10pre mark {
12  display: block;
13  color: currentcolor;
14}
15pre table td:nth-of-type(1) {
17  color: #6b6b6b;
18  font-style: italic;
19}

Useful information that users should know, even when skimming content.

Helpful advice for doing things better or more easily.

[!SUCCESS] Helpful advice for doing things better or more easily.

[!EXAMPLE] Key information users need to know to achieve their goal.

Urgent info that needs immediate user attention to avoid problems.

[!DANGER] Advises about risks or negative outcomes of certain actions.

---

#Extra

#Description List (<dl>)

<dl>
<dt>Something</dt>
<dd>And its description</dd>
</dl>

Name

Godzilla

Born

1952

Birthplace

Japan

Color

Green

#Form Input (<input>)

<input type="checkbox" />
<label>Checkbox</label>

•  Milk
•  Eggs
•  Flour
•  Coffee
•  Combustible lemons

With switch class:

<input class="switch" type="checkbox" />
<label>Checkbox</label>

•  Milk
•  Eggs
•  Flour
•  Coffee
•  Combustible lemons

With switch and big classes:

<input class="switch big" type="checkbox" />
<label>Checkbox</label>

•  Milk
•  Eggs
•  Flour
•  Coffee
•  Combustible lemons

With radio type:

<input type="radio" name="test" />
<label>Radio</label>

•  Milk
•  Eggs
•  Flour
•  Coffee
•  Combustible lemons

With color type:

<label>Color:</label>
<input type="color" value="#000000" />

Color:

Disabled:

With range type:

<input type="range" max="100" value="33">

#Figure Captions (<figcaption>)

<figure>
  -> Whatever content <-
  <figcaption>Caption of content above</figcaption>
</figure>

#Accordion (<details>)

<details>
  <summary>Accordion title</summary>
  -> Contents here <-
</details>

Reveal accordion

Get it? I know, it's an awful pun.

#Side Comment (<small>)

<small>Small, cute text that doesn't catch attention.</small>

Small, cute text that doesn't catch attention.

#Abbreviation (<abbr>)

<abbr title="American Standard Code for Information Interchange">ASCII</abbr>

The ASCII art is awesome!

#Aside (<aside>)

<aside>

-> Contents here <-
</aside>

A quill is a writing tool made from a moulted flight feather (preferably a primary wing-feather) of a large bird. Quills were used for writing with ink before the invention of the dip pen, the metal-nibbed pen, the fountain pen, and, eventually, the ballpoint pen.

As with the earlier reed pen (and later dip pen), a quill has no internal ink reservoir and therefore needs to periodically be dipped into an inkwell during writing. The hand-cut goose quill is rarely used as a calligraphy tool anymore because many papers are now derived from wood pulp and would quickly wear a quill down. However it is still the tool of choice for a few scribes who have noted that quills provide an unmatched sharp stroke as well as greater flexibility than a steel pen.

#Keyboard Input (<kbd>)

<kbd>⌘ Command</kbd>.

To switch the keyboard layout, press ⌘ Super + Space.

#Mark Text (<mark>)

<mark>Marked text</mark>

You know what? I'm gonna say some very important stuff, so important that even bold is not enough.

#Deleted and Inserted Text (<del> and <ins>)

<del>Something deleted</del> <ins>Something added</ins>

Text deleted Text added

#Progress Indicator (<progress>)

<progress></progress>
<progress value="33" max="100"></progress>

#Sample Output (<samp>)

<samp>Sample Output</samp>

Sample Output

#Inline Quotation (<q>)

<q>Someone said something</q>

Blah blah Inline Quote hmm.

#Unarticulated Annotation (<u>)

<u>Gmarrar mitsakes</u>

Yeet the sus drip while vibing with the TikTok fam on a cap-free boomerang.

#External Links

<a class="external" href="https://example.org">External link</a>

Link to site

#Spoilers

<span class="spoiler">Some spoiler</span>

You know, Duckquill is a pretty dumb name. I know, crazy.

With solid class:

<span class="spoiler solid">Some spoiler</span>

You know, Duckquill is a pretty dumb name. I know, crazy.

#Buttons Dialog

<div class="buttons">
  <a href="#top">Go to Top</a>
  <a class="colored external" href="https://example.org">Example</a>
</div>

With centered and big classes:

<div class="buttons centered">
  <button class="big colored">Do Something…</button>
</div>

1. Footnote ↩

2. Footnote (link) ↩