Paragraphs and Line Breaks#

1
This will be
2
inline.
3

4
This is second paragraph.

1
This will be not
2
inline.

Headers#

Markdown supports two styles of headers, Setext and atx.

1
This is an H1
2
=============
3
This is an H2
4
-------------

atx#

HTML Tags: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Uses 1-6 hash characters (#) at the start of the line, corresponding to <h1> - <h6>.

Code:

1
# This is an H1
2
## This is an H2
3
###### This is an H6

Preview:

This is an H6#

Optionally, you may “close” atx-style headers. The closing hashes don’t need to match the number of hashes used to open the header.

Code:

1
# This is an H1 #
2
## This is an H2 ##
3
### This is an H3 ######

Preview:

This is an H3#

Blockquotes#

HTML Tag: <blockquote>

Markdown uses email-style > characters for blockquoting. It looks best if you hard wrap the text and put a > before every line.

Code:

1
> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
2
> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
3
> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
4
>
5
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
6
> id sem consectetuer libero luctus adipiscing.

Preview:

This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.

Markdown allows you to be lazy and only put the > before the first line of a hard-wrapped paragraph.

Code:

1
> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
2
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
3
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
4

5
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
6
id sem consectetuer libero luctus adipiscing.

Preview:

This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.

Blockquotes can be nested (i.e. a blockquote-in-a-blockquote) by adding additional levels of >.

Code:

1
> This is the first level of quoting.
2
>
3
> > This is nested blockquote.
4
>
5
> Back to the first level.

Preview:

This is the first level of quoting.

This is nested blockquote.

Back to the first level.

Blockquotes can contain other Markdown elements, including headers, lists, and code blocks.

Code:

1
> ## This is a header.
2
>
3
> 1.   This is the first list item.
4
> 2.   This is the second list item.
5
>
6
> Here's some example code:
7
>
8
>     return shell_exec("echo $input | $markdown_script");

Preview:

This is a header.#

1. This is the first list item.
2. This is the second list item.

Here’s some example code:

1
return shell_exec("echo $input | $markdown_script");

Lists#

Markdown supports ordered (numbered) and unordered (bulleted) lists.

1
*   Red
2
*   Green
3
*   Blue

1
+   Red
2
+   Green
3
+   Blue

1
-   Red
2
-   Green
3
-   Blue

1
1.  Bird
2
2.  McHale
3
3.  Parish

1
1986. What a great season.

1
1986\. What a great season.

1
*   A list item with a blockquote:
2

3
    > This is a blockquote
4
    > inside a list item.

1
*   A list item with a code block:
2

3
        <code goes here>

1
* A
2
  * A1
3
  * A2
4
* B
5
* C

Code Blocks#

HTML Tag: <pre>

Indent every line of the block by at least 4 spaces or 1 tab.

Code:

1
This is a normal paragraph:
2

3
    This is a code block.

Preview:

This is a normal paragraph:

1
This is a code block.

A code block continues until it reaches a line that is not indented (or the end of the article).

Within a code block, ampersands (&) and angle brackets (< and >) are automatically converted into HTML entities.

Code:

1
    <div class="footer">
2
        &copy; 2004 Foo Corporation
3
    </div>

Preview:

1
<div class="footer">
2
    &copy; 2004 Foo Corporation
3
</div>

Following sections Fenced Code Blocks and Syntax Highlighting are extensions, you can use the other way to write the code block.

1
Here's an example:
2

3
```
4
function test() {
5
  console.log("notice the blank line before this function?");
6
}
7
```

1
function test() {
2
  console.log("notice the blank line before this function?");
3
}

1
```ruby
2
require 'redcarpet'
3
markdown = Redcarpet.new("Hello World!")
4
puts markdown.to_html
5
```

1
require 'redcarpet'
2
markdown = Redcarpet.new("Hello World!")
3
puts markdown.to_html

Horizontal Rules#

HTML Tag: <hr /> Places three or more hyphens (-), asterisks (*), or underscores (_) on a line by themselves. You may use spaces between the hyphens or asterisks.

Code:

1
* * *
2
***
3
*****
4
- - -
5
---------------------------------------
6
___

Preview:

Table#

HTML Tag: <table>

It’s an extension.

Separates column by pipe (|) and header by dashes (-), and uses colon (:) for alignment.

The outer pipes (|) and alignment are optional. There are 3 delimiters each cell at least for separating header.

Code:

1
| Left | Center | Right |
2
|:-----|:------:|------:|
3
|aaa   |bbb     |ccc    |
4
|ddd   |eee     |fff    |
5

6
 A | B
7
---|---
8
123|456
9

10

11
A |B
12
--|--
13
12|45

Preview:

Links#

HTML Tag: <a>

Markdown supports two style of links: inline and reference.

1
This is [an example](http://example.com/ "Title") inline link.
2

3
[This link](http://example.net/) has no title attribute.

1
See my [About](/about/) page for details.

1
[id]: http://example.com/  "Optional Title Here"
2
This is [an example][id] reference-style link.

1
[foo]: http://example.com/  "Optional Title Here"
2
[foo]: http://example.com/  'Optional Title Here'
3
[foo]: http://example.com/  (Optional Title Here)
4
[foo]: <http://example.com/>  "Optional Title Here"

1
[Google]: http://google.com/
2
[Google][]

Emphasis#

HTML Tags: <em>, <strong>

Markdown treats asterisks (*) and underscores (_) as indicators of emphasis. One delimiter will be <em>; *double delimiters will be <strong>.

Code:

1
*single asterisks*
2

3
_single underscores_
4

5
**double asterisks**
6

7
__double underscores__

Preview:

single asterisks

single underscores

double asterisks

double underscores

But if you surround an * or _ with spaces, it’ll be treated as a literal asterisk or underscore.

You can backslash escape it:

Code:

1
\*this text is surrounded by literal asterisks\*

Preview:

*this text is surrounded by literal asterisks*

Code#

HTML Tag: <code>

Wraps it with backtick quotes (`).

Code:

1
Use the `printf()` function.

Preview:

Use the printf() function.

To include a literal backtick character within a code span, you can use multiple backticks as the opening and closing delimiters:

Code:

1
``There is a literal backtick (`) here.``

Preview:

There is a literal backtick (`) here.

The backtick delimiters surrounding a code span may include spaces — one after the opening, one before the closing. This allows you to place literal backtick characters at the beginning or end of a code span:

Code:

1
A single backtick in a code span: `` ` ``
2

3
A backtick-delimited string in a code span: `` `foo` ``

Preview:

A single backtick in a code span: `

A backtick-delimited string in a code span: `foo`

Images#

HTML Tag: <img />

Markdown uses an image syntax that is intended to resemble the syntax for links, allowing for two styles: inline and reference.

1
![Alt text](/path/to/img.jpg)
2

3
![Alt text](/path/to/img.jpg "Optional title")

1
[img id]: https://s2.loli.net/2024/08/20/5fszgXeOxmL3Wdv.webp  "Optional title attribute"
2
![Alt text][img id]

Strikethrough#

HTML Tag: <del>

It’s an extension.

GFM adds syntax to strikethrough text.

Code:

1
~~Mistaken text.~~

Preview:

Mistaken text.

Automatic Links#

Markdown supports a shortcut style for creating “automatic” links for URLs and email addresses: simply surround the URL or email address with angle brackets.

Code:

1
<http://example.com/>
2

3
<address@example.com>

Preview:

http://example.com/

address@example.com

GFM will autolink standard URLs.

Code:

1
https://github.com/emn178/markdown

Preview:

https://github.com/emn178/markdown

Backslash Escapes#

Markdown allows you to use backslash escapes to generate literal characters which would otherwise have special meaning in Markdown’s formatting syntax.

Code:

1
\*literal asterisks\*

Preview:

*literal asterisks*

Markdown provides backslash escapes for the following characters:

Code:

1
\   backslash
2
`   backtick
3
*   asterisk
4
_   underscore
5
{}  curly braces
6
[]  square brackets
7
()  parentheses
8
#   hash mark
9
+   plus sign
10
-   minus sign (hyphen)
11
.   dot
12
!   exclamation mark

Basic Syntax#

1
:::note
2
Highlights information that users should take into account, even when skimming.
3
:::
4

5
:::tip
6
Optional information to help a user be more successful.
7
:::

Custom Titles#

The title of the admonition can be customized.

MY CUSTOM TITLE

This is a note with a custom title.

1
:::note[MY CUSTOM TITLE]
2
This is a note with a custom title.
3
:::

GitHub Syntax#

TIP

The GitHub syntax is also supported.

1
> [!NOTE]
2
> The GitHub syntax is also supported.
3

4
> [!TIP]
5
> The GitHub syntax is also supported.

Spoiler#

You can add spoilers to your text. The text also supports Markdown syntax.

The content is hidden ayyy!

1
The content :spoiler[is hidden **ayyy**]!

1. 用户交互#

访客首先看到的不是文章，而是一个密码输入界面。

2. 客户端验证与解密#

当访客输入密码并点击”解锁”后，页面内嵌的 JavaScript 脚本会执行以下操作：

3. 完成展示#

至此，访客才能看到文章的真实内容。通过这种方式，我们成功地在没有后端的情况下，模拟出了一套安全的”验证-解密-渲染”流程，实现了对静态内容的有效保护。