Markdown parity — complete manual fixture

START OF FIXTURE — this sentence should remain visible in both published posts.

01. Headings

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5

Heading level 6

Setext heading level 1

Setext heading level 2

Repeated heading

First occurrence, for checking table-of-contents links.

Repeated heading

Second occurrence; its table-of-contents link should reach this occurrence.

02. Paragraphs, spacing, and line breaks

This is the first paragraph. It contains ordinary prose.

This is the second paragraph.

This line has a soft break. This follows the soft break.

This line ends with two spaces.
This follows a Markdown hard break.

This line ends with a backslash.
This follows a backslash hard break.

This uses an explicit HTML break.
This follows the HTML break.

03. Emphasis and inline formatting

Bold with asterisks, bold with underscores, italic with asterisks, and italic with underscores.

Bold and italic, bold with italic inside, and italic with bold inside.

Strikethrough and bold strikethrough.

Underlined text and highlighted text.

Press Ctrl + K, or ⌘ + K.

Water is H₂O. A square is x².

HTML has a tooltip.

snake_case_word and camelCaseWord should remain ordinary words.

04. Escaping, entities, and Unicode

Escaped punctuation: *asterisks*, _underscores_, [brackets], #hash, >greater-than, and |pipe.

Literal backslashes: C:\Users\Example\Documents.

These entities should remain visible as text: <article>, &, "quoted", 'apostrophe', and ©.

The text <article> should show the entity spelling inside code.

The <div> element is mentioned inside inline code, not used as an HTML block.

Emoji: 😀 🚀 ✅ 💡 🧪. Punctuation: “quotes”, ‘apostrophe’, an em dash — and an ellipsis …

Unicode text: café, naïve, 日本語, हिन्दी, العربية.

05. Links

Ordinary link

Link with a title

Bold link text and italic link text.

code inside a link.

A URL containing parentheses.

Query parameters.

Autolink: https://example.com/autolink.

Bare URL: https://example.com/bare_url.

Email link: Example email.

Email autolink: hello@example.com.

Reference-style link, collapsed reference, and shortcut reference.

Jump to the final section.

06. Unordered lists

• First bullet
• Second bullet with bold and a link
  • Nested bullet
    • Third-level bullet
  • Another nested bullet
• Last top-level bullet

• Star-marker item one
• Star-marker item two

• Plus-marker item one
• Plus-marker item two

07. Ordered lists and starting numbers

1. First item
2. Second item
   1. Nested first item
   2. Nested second item
3. Third item

An ordered list that starts at five:

5. Five
6. Six
7. Seven

A zero-based list:

0. Zero
1. One

Parenthesis-style list markers:

1. Parenthesis first
2. Parenthesis second

08. Loose lists and mixed nesting

• First loose item.

  Second paragraph belonging to the first item.

• Second loose item.

  A quote inside the second item.

• Third loose item.

  const insideList = true;
  

1. An ordered item with bullets:
   • Nested bullet one
   • Nested bullet two
2. Another ordered item.

09. Task lists

• Unchecked task
• Checked task
• Uppercase checked marker
• Task with bold, italic, and a link
  • Completed nested task
  • Incomplete nested task

Empty task items, including an empty item with a nested list:

• • Child of an empty task
• Sibling after the empty task

An empty task in a loose list:

• This explanation belongs to the empty task above.

• Finished loose-list task.

Mixed task and ordinary bullet items:

• Checked task
• Ordinary bullet
• Unchecked task

Ordered task markers:

1. Ordered unchecked task
2. Ordered checked task

Literal markers that should not accidentally become empty tasks:

• [ ]not-a-task
• [ ]
• [ ]

10. Blockquotes

A simple blockquote with bold, italic, and a link.

First paragraph in a quote.

Second paragraph in the same quote.

A nested blockquote.

• A bullet in the quote
• Another bullet

• Quoted unchecked task
• Quoted checked task

11. Horizontal rules

Dash rule:

---

Asterisk rule:

---

Underscore rule:

---

12. Tables

Left aligned	Center aligned	Right aligned
Alpha	Beta	123
Bold	Italic	Strike
Link	inline code	45.67
Escaped pipe: a | b	Line one Line two	0
	Empty left cell
H2O	x2	K

No explicit	Alignment
One	Two

A table without outer pipes:

Name	Value
First	1
Second	2

13. Inline code

Run npm install and inspect src/lib/markdown.ts.

Use double backticks to include a backtick: a `backtick` inside code.

Formatting stays literal: **not bold**, <div>not an element</div>, and [not a link](https://example.com).

Dollar math stays literal in code: $x^2 + y_1$.

Backslash math stays literal in code: \(x^2 + y_1\).

14. Fenced code and language aliases

const greeting = "Hello, Hashnode";
console.log(greeting);

type Result = { ok: boolean; count: number };
const result: Result = { ok: true, count: 3 };

export const Greeting = () => <strong>Hello</strong>;

def square(value: int) -> int:
    return value ** 2

printf '%s\n' "$HOME"
echo 'Dollar signs: $5 and $10'

{
  "enabled": true,
  "items": [1, 2, 3],
  "message": "<div> & literal text"
}

<article class="example">
  <h2>This is source code, not a rendered heading</h2>
</article>

.example {
  display: grid;
  gap: 1rem;
}

SELECT id, title FROM posts WHERE is_active = true;

- const version = "old";
+ const version = "new";

This block explicitly requests plain text.
SELECT * FROM posts;
body { color: red; }

This block has no language label.
SELECT * FROM posts;
body { color: red; }
It should not receive a guessed SQL or CSS language.

Unknown language labels should still leave readable code.

const tildeFence = true;

An outer fence can contain a shorter fence:
```js
const nestedFence = true;
```

15. Indented code blocks

The following lines have four leading spaces:

const indentedCode = true;
console.log("Keep the indentation");

16. Math and currency

Inline backslash math: \(x^2 + y_1 = z^2\).

Legacy doubled-backslash math: \(a^2 + b^2 = c^2\).

Inline dollar math: \(x^2 + y_1 = z^2\).

LaTeX commands: \(\frac{a}{b} + \alpha = \beta\).

A comparison inside math: $a < b$.

Display math:

$$ E = mc^2 $$

Another display formula:

$$ \sum_{i=1}^{n} i = \frac{n(n+1)}{2} $$

Currency must remain ordinary text: it costs $5 to $10. Plans cost $100 and $200.

Literal numeric range: $5-10$.

Code still takes precedence:

$x^2 + y_1$
\(x^2 + y_1\)
$$ E = mc^2 $$

17. Footnotes

A numeric footnote¹, a named footnote², and the same numeric footnote again¹.

A single-word definition³ and a URL-only definition⁴.

Labels with an underscore⁵ and an asterisk⁶.

A footnote with multiple paragraphs and a list⁷.

Adjacent definitions are referenced here: first⁸, then second⁹.

18. Images, titles, alignment, and sizing

The image samples reuse Hashnode's logo so their alignment and sizing can be compared.

Plain Markdown image:

Image with a title:

Empty alternative text:

Hashnode left alignment:

Hashnode center alignment:

Hashnode right alignment:

HTML image with a title, size, and alignment:

Linked image:

Reference-style image:

19. Hashnode mentions

Hello Fazle, this is a Hashnode mention.

A mention in a sentence: thanks to Hashnode for reading.

20. Callouts

21. Collapsible details

Raw HTML details — click to expand

This paragraph is inside the details element.

• First item
• Second item

Editor-style details — click to expand

This uses the editor's details attributes.

Keep this second paragraph.

22. Hashnode embeds

Standalone YouTube embed:

https://www.youtube.com/watch?v=jNQXAC9IVRw

Inline embed, with text on both sides:

BEFORE INLINE EMBED https://www.youtube.com/watch?v=jNQXAC9IVRw AFTER INLINE EMBED.

An ordinary website card:

https://example.com

Two inline embeds:

FIRST https://www.youtube.com/watch?v=jNQXAC9IVRw MIDDLE https://example.com LAST.

23. Hashnode widgets and embed combinations

Replace every occurrence of verify-widget in the source with a real widget ID from this publication before using these cases. Without a configured widget, compare placeholder preservation only.

Standalone widget:

Inline widget:

BEFORE WIDGET

AFTER WIDGET.

Widget before embed:

https://www.youtube.com/watch?v=jNQXAC9IVRw

Embed before widget:

https://www.youtube.com/watch?v=jNQXAC9IVRw

Widget and embed without a separating space:

https://www.youtube.com/watch?v=jNQXAC9IVRw

Embed and widget without a separating space:

https://www.youtube.com/watch?v=jNQXAC9IVRw

Repeated widgets:

Several tokens between prose:

ARTICLE START

BETWEEN https://example.com AGAIN ARTICLE END.

The paragraph after the widgets and embeds must remain visible.

24. Additional HTML

A paragraph containing strong, emphasis, deleted, and inserted text.

25. Compatibility probes — support is not assumed

These cases deliberately exercise syntax or editor round trips that may not be fully supported. Record differences; do not assume every construct should gain special formatting.

Definition-list syntax

Term one : Definition one

Term two : Definition two

GitHub-style alert syntax

[!NOTE] A GitHub-style note may render as an ordinary blockquote here.

[!WARNING] A GitHub-style warning may render as an ordinary blockquote here.

Other Markdown extensions

==Highlight shorthand==, H2O, x^2^, and :smile: are extension probes. The explicit HTML equivalents appear earlier.

Mermaid fence

flowchart LR
  Author --> Markdown
  Markdown --> PublishedPost

Additional math forms

Simple math without operators: $x$ and $x$.

Display bracket delimiters:

[ a^2 + b^2 = c^2 ]

LaTeX spacing command:

$$ \int_0^1 x^2,dx = \frac{1}{3} $$

Literal custom syntax inside code

<a class="embed-card" href="https://example.com">https://example.com</a> and <div class="hn-embed-widget" id="verify-widget"></div> are intended as literal code samples here.

<p><a class="embed-card" href="https://example.com">https://example.com</a></p>

<div class="hn-embed-widget" id="verify-widget"></div>
- [ ]
[^literal]: This is code, not a footnote definition.

Raw alignment, comments, and open details

Initially open details probe

Check whether the open state survives.

End of fixture

END OF FIXTURE — this heading and sentence must remain visible after all embeds, widgets, code blocks, and HTML.

Use the footnote back-links to return to their references. The hidden Footnotes label should not become a visible table-of-contents entry.

Footnotes

1. Numeric note with bold, italic, and code. ↩︎ ↩︎²

2. A named note with a link. ↩︎

3. Yes ↩︎

4. https://example.com/footnote ↩︎

5. An underscore-label definition. ↩︎

6. An asterisk-label definition. ↩︎

7. First paragraph of the long note.

   Second paragraph of the same note.

   • First item in the note.
   • Second item in the note.
   ↩︎

8. First adjacent definition. ↩︎

9. Second adjacent definition. ↩︎