mobile wallpaper 1mobile wallpaper 2mobile wallpaper 3mobile wallpaper 4mobile wallpaper 5mobile wallpaper 6mobile wallpaper 7mobile wallpaper 8mobile wallpaper 9mobile wallpaper 10mobile wallpaper 11mobile wallpaper 12mobile wallpaper 13mobile wallpaper 14mobile wallpaper 15mobile wallpaper 16mobile wallpaper 17mobile wallpaper 18mobile wallpaper 19mobile wallpaper 20mobile wallpaper 21mobile wallpaper 22mobile wallpaper 23
2403 字
7 分钟
示例|Markdown教程
2025-01-20

Markdown 教程#

这是一个展示如何编写 markdown 文件的示例,整合了核心语法与扩展语法(GFM)。

块级元素#

段落和换行#

段落#

HTML 标签:<p>

由一个或多个空行分隔。(只包含空格制表符的行也视为空行。)

代码:

This will be
inline.
This is second paragraph.

预览:


This will be inline.

This is second paragraph.


换行#

HTML 标签:<br />

在行尾添加两个或更多空格

代码:

This will be not
inline.

预览:


This will be not
inline.


标题#

Markdown 支持两种标题风格:Setext 和 atx。

Setext#

HTML 标签:<h1><h2>

使用任意数量的**等号(=)作为”下划线”表示 <h1>,使用连字符(-)**表示 <h2>

代码:

This is an H1
=============
This is an H2
-------------

预览:


This is an H1#

This is an H2#


atx#

HTML 标签:<h1><h2><h3><h4><h5><h6>

在行首使用 1-6 个井号(#),分别对应 <h1> - <h6>

代码:

# This is an H1
## This is an H2
###### This is an H6

预览:


This is an H1#

This is an H2#

This is an H6#

你也可以选择”闭合” atx 风格的标题。闭合的井号数量不需要与开头的井号数量一致。

代码:

# This is an H1 #
## This is an H2 ##
### This is an H3 ######

预览:


This is an H1#

This is an H2#

This is an H3#


块引用#

HTML 标签:<blockquote>

Markdown 使用邮件风格的 > 字符表示块引用。如果对文本进行硬换行并在每一行前加上 >,效果最佳。

代码:

> 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.

预览:


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 也允许你偷懒,只在硬换行段落的第一行前加上 >。

代码:

> 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.

预览:


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.


块引用可以嵌套(即块引用中的块引用),只需添加更多层级的 >。

代码:

> This is the first level of quoting.
>
> > This is nested blockquote.
>
> Back to the first level.

预览:


This is the first level of quoting.

This is nested blockquote.

Back to the first level.


块引用中可以包含其他 Markdown 元素,包括标题、列表和代码块。

代码:

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

预览:


This is a header.#

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

Here’s some example code:

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

列表#

Markdown 支持有序(编号)列表和无序(项目符号)列表。

无序列表#

HTML 标签:<ul>

无序列表使用星号(*)加号(+)连字符(-)

代码:

* Red
* Green
* Blue

预览:


  • Red
  • Green
  • Blue

等价于:

代码:

+ Red
+ Green
+ Blue

以及:

代码:

- Red
- Green
- Blue

有序列表#

HTML 标签:<ol>

有序列表使用数字加英文句点:

代码:

1. Bird
2. McHale
3. Parish

预览:


  1. Bird
  2. McHale
  3. Parish

有时可能会意外触发有序列表,例如这样写:

代码:

1986. What a great season.

预览:


  1. What a great season.

你可以用反斜杠(\)转义句点:

代码:

1986\. What a great season.

预览:


1986. What a great season.


缩进内容#

块引用#

要在列表项中放置块引用,块引用的 > 分隔符需要缩进:

代码:

* A list item with a blockquote:
> This is a blockquote
> inside a list item.

预览:


  • A list item with a blockquote:

    This is a blockquote inside a list item.


代码块#

要在列表项中放置代码块,代码块需要缩进两次——即 8 个空格两个制表符

代码:

* A list item with a code block:
<code goes here>

预览:


  • A list item with a code block:

    <code goes here>

嵌套列表#

代码:

* A
* A1
* A2
* B
* C

预览:


  • A
    • A1
    • A2
  • B
  • C

代码块#

HTML 标签:<pre>

将代码块的每一行缩进至少 4 个空格1 个制表符

代码:

This is a normal paragraph:
This is a code block.

预览:


This is a normal paragraph:

This is a code block.

代码块会一直延续,直到遇到没有缩进的行(或文章结尾)。

在代码块内,***and 符号(&)*和尖括号(< 和 >)**会自动转换为 HTML 实体。

代码:

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

预览:


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

接下来的”围栏代码块”和”语法高亮”部分属于扩展语法,你可以用另一种方式来编写代码块。

围栏代码块#

只需用 ``` 将代码包裹起来(如下所示),就不需要缩进 4 个空格了。

代码:

Here's an example:
```
function test() {
console.log("notice the blank line before this function?");
}
```

预览:


Here’s an example:

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

语法高亮#

在围栏代码块中,可以添加一个可选的语言标识符,代码就会得到语法高亮(支持的语言)。

代码:

```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
```

预览:


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

水平分割线#

HTML 标签:<hr /> 在单独一行中放置三个或更多连字符(-)、星号(*)或下划线(_)。连字符或星号之间可以有空格。

代码:

* * *
***
*****
- - -
---------------------------------------
___

预览:









表格#

HTML 标签:<table>

这是一个扩展语法。

使用**竖线(|)分隔列,使用连字符(-)分隔表头,并使用冒号(:)**设置对齐方式。

外侧的**竖线(|)**和对齐设置是可选的。每个单元格至少需要 3 个分隔符来分隔表头。

代码:

| Left | Center | Right |
|:-----|:------:|------:|
|aaa |bbb |ccc |
|ddd |eee |fff |
A | B
---|---
123|456
A |B
--|--
12|45

预览:


LeftCenterRight
aaabbbccc
dddeeefff
AB
123456
AB
1245

行内元素#

链接#

HTML 标签:<a>

Markdown 支持两种链接风格:行内式和引用式。

行内式#

行内链接的格式如下:[链接文字](URL "标题")

标题是可选的。

代码:

This is [an example](http://example.com/ "Title") inline link.
[This link](http://example.net/) has no title attribute.

预览:


This is an example inline link.

This link has no title attribute.


如果引用的是同一服务器上的本地资源,可以使用相对路径:

代码:

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

预览:


See my About page for details.


引用式#

你可以预先定义链接引用,格式如下:[id]: URL "标题"

标题同样是可选的。引用链接时的格式为:[链接文字][id]

代码:

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

预览:


This is an example reference-style link.


也就是说:

  • 方括号中包含链接标识符(不区分大小写,可选择从左边距缩进最多三个空格);
  • 后跟一个冒号;
  • 后跟一个或多个空格(或制表符);
  • 后跟链接的 URL;
  • 链接 URL 可以选择用尖括号包裹;
  • 可选择在后面加上链接的标题属性,用双引号或单引号包裹,或用圆括号包裹。

以下几种链接定义是等价的:

代码:

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

使用一对空的方括号时,链接文字本身会被用作标识符。

代码:

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

预览:


Google


强调#

HTML 标签:<em><strong>

Markdown 将**星号(*)下划线(_)**视为强调标记。单个分隔符表示 <em>双分隔符表示 <strong>

代码:

*single asterisks*
_single underscores_
**double asterisks**
__double underscores__

预览:


single asterisks

single underscores

double asterisks

double underscores


但如果 * 或 _ 两侧有空格,它就会被当作普通的星号或下划线字符。

你可以使用反斜杠转义:

代码:

\*this text is surrounded by literal asterisks\*

预览:


*this text is surrounded by literal asterisks*


行内代码#

HTML 标签:<code>

用**反引号(`)**包裹。

代码:

Use the `printf()` function.

预览:


Use the printf() function.


要在代码片段中包含字面反引号字符,可以使用多个反引号作为开始和结束分隔符:

代码:

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

预览:


There is a literal backtick (`) here.


包裹代码片段的反引号分隔符可以包含空格——开始后一个,结束前一个。这样就可以在代码片段的开头或结尾放置字面反引号字符:

代码:

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

预览:


A single backtick in a code span: `

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


图片#

HTML 标签:<img />

Markdown 的图片语法有意设计得与链接语法相似,同样支持两种风格:行内式和引用式。

行内式#

行内图片语法如下:![替代文字](URL "标题")

标题是可选的。

代码:

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

预览:


Alt text

Alt text


也就是说:

  • 一个感叹号:!;
  • 后跟一对方括号,其中包含图片的 alt 属性文字;
  • 后跟一对圆括号,其中包含图片的 URL 或路径,以及可选的用双引号或单引号包裹的标题属性。

引用式#

引用式图片语法如下:![替代文字][id]

代码:

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

预览:


Alt text


删除线#

HTML 标签:<del>

这是一个扩展语法。

GFM 增加了删除线文本的语法。

代码:

~~Mistaken text.~~

预览:


Mistaken text.


杂项#

自动链接#

Markdown 支持一种快捷方式来为 URL 和电子邮件地址创建”自动”链接:只需用尖括号将 URL 或邮箱地址包裹起来。

代码:

<http://example.com/>
<address@example.com>

预览:


http://example.com/

address@example.com


GFM 会自动链接标准 URL。

代码:

https://github.com/emn178/markdown

预览:


https://github.com/emn178/markdown


反斜杠转义#

Markdown 允许使用反斜杠转义来生成字面字符,这些字符在 Markdown 格式语法中原本具有特殊含义。

代码:

\*literal asterisks\*

预览:


*literal asterisks*


Markdown 为以下字符提供反斜杠转义:

代码:

\ 反斜杠
` 反引号
* 星号
_ 下划线
{} 花括号
[] 方括号
() 圆括号
# 井号
+ 加号
- 减号(连字符)
. 句点
! 感叹号

内联 HTML#

对于 Markdown 语法未涵盖的标记,直接使用 HTML 本身即可。无需任何前缀或分隔符来表明你正在从 Markdown 切换到 HTML,直接写标签就行。

代码:

This is a regular paragraph.
<table>
<tr>
<td>Foo</td>
</tr>
</table>
This is another regular paragraph.

预览:


This is a regular paragraph.

Foo

This is another regular paragraph.


请注意,Markdown 格式语法不会在块级 HTML 标签内被处理。

与块级 HTML 标签不同,Markdown 语法会在行内级标签中被处理。

代码:

<span>**Work**</span>
<div>
**No Work**
</div>

预览:


Work

**No Work**
***
分享

如果这篇文章对你有帮助,欢迎分享给更多人!

示例|Markdown教程
https://github.com/emn178/markdown
作者
emn178
发布于
2025-01-20
许可协议
Unlicensed

部分信息可能已经过时

目录