Markdown 基础知识

段落与换行

段落

HTML标签:<p>

一条或多条空白线。(空行是指仅包含空格制表符的行,则被视为空白。)

代码:

This will be
inline.

This is second paragraph.

预览:


这将是
内线的。

这是第二段。


换行

HTML标签:<br />

在一行末尾加上两个或更多空格

代码:

This will be not
inline.

预览:


这不会
是内线的。


头部

Markdown 支持两种头部样式,分别是 Setext 和 atx。

正文

HTML 标签: ,<h1><h2>

“下划线”使用等号(=)表示,划线(-表示,表示任意数字。<h1><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

可选地,你可以“关闭”atx风格的头部。闭合哈希不需要匹配打开头部时使用的哈希数。

代码:

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

预览:


这是一个包含两段的引用。Lorem ipsum dolor sit amet, consecttuer 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.

预览:


这是一个包含两段的引用。Lorem ipsum dolor sit amet, consecttuer 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.

预览:


这是引用的第一层。

这是嵌套的块引号。

回到第一关。


块引号可以包含其他 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");

列表

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

无序

HTML标签:<ul>

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

代码:

*   Red
*   Green
*   Blue

预览:


  • 红色

  • 绿色

  • 蓝色


等价于:

代码:

+   Red
+   Green
+   Blue

以及:

代码:

-   Red
-   Green
-   Blue

命令

HTML标签:<ol>

有序列表使用数字和周期:

代码:

1.  Bird
2.  McHale
3.  Parish

预览:


  1. 鸟类

  2. 麦克黑尔

  3. 教区


写类似这样的内容,有可能意外触发有序列表:

代码:

1986. What a great season.

预览:


  1. 多么精彩的赛季。


你可以反斜线-转义(\)句号:

代码:

1986\. What a great season.

预览:


1986年。多么精彩的赛季。


凹陷

引用

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

代码:

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

预览:


  • 一个带有代码块的列表项:

    <code goes here>
    

嵌套列表

代码:

* A
  * A1
  * A2
* B
* C

预览:


  • 一个

    • A1

    • A2

  • B

  • C


代码块

HTML标签:<pre>

每行都要缩进至少4格1个标签

代码:

This is a normal paragraph:

    This is a code block.

预览:


这是一段正常的段落:

This is a code block.

代码块会持续进行,直到到达未缩进的行(或文章末尾)。

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

代码:

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

预览:


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

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

围栏代码块

只要把代码包装进去

“'' '(如下所示),你不需要再缩进四格。

1
2
3
4

Code:

    Here's an example:

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

function test() {
console.log(“注意这个函数前的空行吗?”);
}

1
2
3
4
5
6
7
8
9
10
***
#### Syntax Highlighting
In your fenced block, add an optional language identifier and we'll run it through syntax highlighting ([Support Languages](https://github.com/github/linguist/blob/master/lib/linguist/languages.yml)).

Code:

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

预览:


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

水平规则

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

代码:

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

预览:








表格

HTML标签:<table>

这是延长。

通过管道(|)分隔列,用破折号(-)分隔首页,并使用冒号(:))进行对齐。

管(|)和对齐是可选的。每个单元格至少有3个分隔符用于分隔头部。

代码:

1
2
3
4
5
6
7
8
9
10
11
12
| Left | Center | Right |
|:-----|:------:|------:|
|aaa   |bbb     |ccc    |
|ddd   |eee     |fff    |

 A | B
---|---
123|456

A |B
--|--
12|45

预览:


中心

AAA

BBB

CCC

DDD

FFF

一个

B

123

456

一个

B

12

45


跨度元素

链接

HTML标签:<a>

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

直列

像这样的内联链接格式:[Link Text](URL "Title")

标题是可选的。

代码:

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

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

预览:


这是一个示例内联链接。

此链接无标题属性。


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

代码:

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

预览:


详情请参见我的关于页面


参考文献

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

标题也是可选的。你引用的链接格式如下:[Link Text][id]

代码:

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

预览:


这是一个示例参考式链接。


那是:

  • 方括号包含链接标识符(不区分大小写,可选择从左边距使用最多三个空格缩进);

  • 后接冒号;

  • 后面跟一个或多个空格(或制表符);

  • 接着是链接的网址;

  • 链接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][]

预览:


谷歌


强调

HTML 标签: ,<em><strong>

Markdown 将星号(*)下划线(_)视为强调的指标。一个分隔符为;*双重分隔符将为 。<em><strong>

代码:

*single asterisks*

_single underscores_

**double asterisks**

__double underscores__

预览:


单星号

单曲配乐

双星号

双重下划线


但如果你用空格包住*或_,它会被当作字面上的星号或下划线来处理。

你可以反斩逃脱它:

代码:

\*this text is surrounded by literal asterisks\*

预览:


这段文字被字面上的星号环绕


代码

HTML标签:<code>

反向引号(')包裹。

代码:

Use the `printf()` function.

预览:


用这个功能。printf()


要在代码区间内包含字面回溯引号字符,可以使用多个回引作为开头和闭合分隔符:

代码:

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

预览:


代码范围中的单个回溯跳动:`

代码张成中的回勾分隔字符串foo


图片

HTML标签:<img />

Markdown 使用了类似于链接语法的图像语法,支持两种样式:内联和引用。

直列

内联图像语法如下:![Alt text](URL "Title")

标题是可选的。

代码:

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

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

预览:


备用文本

备用文本


那是:

  • 一个感叹号:!;

  • 接着是一组方括号,包含图片的 alt 属性文本;

  • 后面是一组括号,包含图片的URL或路径,以及一个可选的标题属性,后者用双引号或单引号包围。

参考文献

参考风格的图像语法如下:![Alt text][id]

代码:

[img id]: url/to/image  "Optional title attribute"
![Alt text][img id]

预览:


备用文本


备用文本

HTML标签:<del>

这是延长。

GFM 会在删除线文本中添加语法。

代码:

1
~~Mistaken text.~~

预览:


发错了短信。


其他

自动链接

Markdown 支持一种快捷方式样式,用于创建 URL 和电子邮件地址的“自动”链接:只需用角括号包围 URL 或电子邮件地址即可。

代码:

<http://example.com/>

<[email protected]>

预览:


http://example.com/

[email protected]


GFM会自动链接标准网址。

代码:

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

预览:


https://github.com/emn178/markdown


反斜线逃脱

Markdown 允许你使用反斜线跳脱来生成字面字符,这些字符在 Markdown 的格式语法中本应具有特殊意义。

代码:

\*literal asterisks\*

预览:


字面上的星号


Markdown 为以下字符提供了反斜逃脱:

代码:

\   backslash
`   backtick
*   asterisk
_   underscore
{}  curly braces
[]  square brackets
()  parentheses
#   hash mark
+   plus sign
-   minus sign (hyphen)
.   dot
!   exclamation mark

内联HTML

对于Markdown语法不覆盖的任何标记,你只需使用HTML本身。无需在前言或界定说明你是从Markdown切换到HTML的;你只需要用标签。

代码:

This is a regular paragraph.

<table>
    <tr>
        <td>Foo</td>
    </tr>
</table>

This is another regular paragraph.

预览:


这是一个普通的段落。

这又是一段常规段落。


注意,Markdown 格式化语法不会在块级 HTML 标签中处理

与块级HTML标签不同,Markdown语法是在跨区级标签中处理的。

代码:

<span>**Work**</span>

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

预览:


工作


没工作

✍️ 作者:Tom

📄 共享协议: CC 4.0协议

🔗 原文链接: https://22.3344567.xyz/archives/ae3f6b6e-86ab-4430-923c-8cb3dea09dc8

评论