Category: Expert Guide

How does an md-preview tool ensure accurate rendering of Markdown?

md-preview Accuracy Demonstration

1. Headings

md-preview renders headings accurately based on the number of '#' symbols.

# Heading Level 1

## Heading Level 2

### Heading Level 3

#### Heading Level 4

##### Heading Level 5

###### Heading Level 6

2. Paragraphs and Line Breaks

This is a standard paragraph. md-preview correctly interprets blocks of text as paragraphs.

This is another paragraph. Two newline characters create a new paragraph.

This paragraph is separated by a single newline, which is typically ignored by md-preview and rendered as part of the same paragraph.

3. Emphasis and Strong Emphasis

This text uses emphasis (asterisks) and strong emphasis (double asterisks).

This text uses _emphasis_ (underscores) and __strong emphasis__ (double underscores).

4. Lists

Unordered Lists

  • Item 1
  • Item 2
    • Sub-item 2.1
    • Sub-item 2.2
  • Item 3

Ordered Lists

  1. First item
  2. Second item
    1. Sub-item 2.1
    2. Sub-item 2.2
  3. Third item

5. Links and Images

A standard link to a website.

A link with a title: Example with Title.

An image:

Placeholder Image

An image with a link:

Small Placeholder

6. Code

Inline Code

This is an example of inline code using backticks.

Fenced Code Blocks

md-preview accurately renders fenced code blocks, preserving formatting and enabling syntax highlighting.

function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet("World");
def factorial(n):
    if n == 0:
        return 1
    else:
        return n * factorial(n-1)

print(factorial(5))

Indented Code Blocks

This is an indented code block:

This is also a code block,
indented by 4 spaces.
It preserves its structure.

7. Blockquotes

This is a blockquote. It's used to cite text from another source.

It can span multiple paragraphs.

8. Horizontal Rules

A horizontal rule:


Another section follows.

9. Tables (GFM Extension)

md-preview supports tables, a common GFM extension.

Header 1 Header 2 Header 3
Row 1, Col 1 Row 1, Col 2 Row 1, Col 3
Row 2, Col 1 Row 2, Col 2 Row 2, Col 3

10. Task Lists (GFM Extension)

md-preview renders task lists for project management.

  • Completed Task
  • Incomplete Task
  • Another Task

11. Strikethrough (GFM Extension)

This text has been ~~deleted~~ and this is normal text.

12. HTML Passthrough

md-preview can render embedded HTML.

Below is a bold tag from embedded HTML.

This text is blue due to inline style.

Even a simple div is rendered:

This is a div with a border.

13. Escaping Special Characters

To display special Markdown characters literally, they must be escaped with a backslash.

Displaying a literal asterisk: \*

Displaying a literal hash: \#

Displaying a literal backtick: \`

14. Unicode Characters

md-preview correctly handles various Unicode characters.

Example: こんにちは (Konnichiwa - Japanese)

Example: Привет (Privet - Russian)

Example:你好 (Nǐ hǎo - Mandarin Chinese)

Example: © ® ™ symbols.

15. Multi-line Elements

Markdown elements can span multiple lines.

This is a paragraph that continues onto several lines. md-preview will treat this as a single paragraph.

  • This is a list item that spans multiple lines. The indentation for sub-items is important.
    • Sub-item that also spans lines.