Markdown基础教程

2022-11-30 16:11:47 浏览数 (1)

基础功能

什么是Markdown

Markdown是一种轻量标记语言,通过简单的语法,使普通文本具有一定的格式。文件后缀名一般为.md

注意:用到的符号必须在英文状态下输入才会生效

插入标题

标题有两种写法:

方法一:在文字下方输入 -= 构成的线:

代码语言:javascript复制
MARKDOWN
我展示的是一级标题
=================

我展示的是二级标题
-----------------

输出结果:

标题1

方法二:在文字前面插入# 号,内容前面要有空格与#隔开:

代码语言:javascript复制
MARKDOWN
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

输出结果:

标题2


段落格式要求

Markdown 换行挺讲究,会发现在编写的时候直接回车换行发现不生效,那怎么办呢?

方法一:在段落最后使用加入<br/>标签实现换行。 方法二:段落最后按两次回车,直接隔一行写。

例:

代码语言:javascript复制
MARKDOWN
段落1<br> 
段落2
代码语言:javascript复制
MARKDOWN
段落1

段落2

字体效果

改变字体形态相关写法

粗体和斜体使用的是 * 号和 下划线:_符号,符号数量不同效果不同 下划线可以通过 HTML 的 <u></u> 标签来实现 删除线只需要在文字的两端加上两个波浪线 ~~ 即可

代码语言:javascript复制
MARKDOWN
*斜体文本*
_斜体文本_
**粗体文本**
__粗体文本__
***粗斜体文本***
___粗斜体文本___
~~带删除线文本~~
<u>带下划线文本</u>

输出结果:


分隔线

在一行中使用三个及以上的星号:*、减号:- 或 下划线: _。即可生成分隔线 生成的分隔线样式根据主题而定。

代码语言:javascript复制
MARKDOWN
***
---
******
----------
__________
<hr>

输出结果:


列表

Markdown 支持有序列表和无序列表。 无序列表可使用星号:*、加号: 、减号-都可以,符号与内容要有空格隔开。 有序列表直接数字 .即可,符号与内容要有空格隔开。

代码语言:javascript复制
MARKDOWN
* 无序列表项1
* 无序列表项2

  无序列表项1
  无序列表项2

- 无序列表项1
- 无序列表项2

1. 有序列表1
2. 有序列表2
3. 有序列表3

输出结果:

列表嵌套写法:直接在第二行按Tab键或按四下空格缩进一下即可。

代码语言:javascript复制
MARKDOWN
1. 第一项:
    - 第一项第一个
    - 第一项第二个
2. 第二项:
    - 第二项第一个
    - 第二项第二个

输出结果:


引用区块

在文本前面添加> 符号即可将文本变为引用区块。

代码语言:javascript复制
MARKDOWN
> 文本内容

输出结果:


代码块

可使用三个符号包裹住代码块,并指定一种语言即可生成代码预览区域。此符号一定要在英文状态下才能打出。 键一般位于Tab键上面、数字1键左边。

如果在文字行内插入代码块,可以在代码前后分别插入一个 符号即可。被包裹的文字会变成红色。 如: printf() ,效果:printf()`


网址链接

可直接在文章粘贴你的链接,如果网址太长可以使用格式[链接名称](链接地址)

代码语言:javascript复制
MARKDOWN
链接写法1:https://cn.bing.com/
链接写法2:[必应](https://cn.bing.com/)

输出结果:

链接写法1:https://cn.bing.com/ 链接写法2:必应


插入图片

图片和链接插入方式都差不多,就是在前面多了个叹号:![图片描述](图片地址),图片描述可写可不写 图片地址可以是网址。 也可以是本地文件名(文件需要存在,且路径正确)。

文章内如何引用本地图片文件:进入hexo的source/_posts目录后,会发现一个写文章内容的.md文件和一个同名的文件夹,把图片丢进文件夹里面就行,然后直接![图片描述](图片文件名)引用即可。

代码语言:javascript复制
MARKDOWN
图片写法1:![](baidu.png)
图片写法2:![百度](https://img.yuanmabao.com/zijie/pic/2022/11/30/wzfzbx2mpha.png)

插入表格

制作表格可使用 | 来分隔不同的单元格,使用 - 来分隔表头和其他行。 也可以设置表格的对齐方式: -: 设置内容和标题栏居右对齐。 :- 设置内容和标题栏居左对齐。 :-: 设置内容和标题栏居中对齐。

代码语言:javascript复制
PLAINTEXT
| 左对齐 | 右对齐 | 居中对齐 | 默认对齐 |
| :-----| ----:  | :----:  | ------  |
| 单元格 | 单元格 | 单元格  |  单元格  |
| 单元格 | 单元格 | 单元格  |  单元格  |

输出结果:

左对齐

右对齐

居中对齐

默认对齐

单元格

单元格

单元格

单元格

单元格

单元格

单元格

单元格


以上就是Markdown的一些基本写法。

原版高级功能

支持 HTML 代码

markdown是支持html且正常识别。因此,可以解锁更多自定义写法。

例:更改字体颜色:

代码语言:javascript复制
HTML
<font color="red">红色</font>
<font color="green">绿色</font>
<font color="blue">蓝</font>

输出结果:

红色 绿色 蓝色

可以去查阅Html的文档了解更多:菜鸟教程-HTML文档


转义字符

如果在输出以下字符无法正常输出,可在字符前面加上反斜杠符号。 例如我想正常输出” * “号,且不会被识别成格式控制符号,可以写为*

名称

字符

写法

反斜杠

\

星号

*

*

反引号

`

```

下划线

_

_

花括号

{ }

{ }

中括号

[ ]

[ ]

括号

( )

( )

井号

#

#

加号

减号

-

-

.

.

感叹号

!

!

竖线

|

`

竖线比较特殊,在markdown的表格内不能直接用反斜杠|转义,可使用html的字符代码|代替。


数学公式

输出数学公式需要对应的插件支持。只需要用符号把公式包裹起来就行。如果是复杂的公式则可以用两个

本主题是安装了MathJax 数学插件的,只需要在含有数学公式内容页面的Front-matter部分添加mathjax: true即可开启公式渲染。

代码语言:javascript复制
MARKDOWN
行内公式(适用于简单公式):$ x^2   sqrt{y} = z $

单独占一行(适用于复杂的公式):
$$
frac{d}{dx}e^{ax}=ae^{ax}quad sum_{i=1}^{n}{(X_i - overline{X})^2}
$$

输出结果:

行内公式(适用于简单公式):x2 y=z

单独占一行(适用于复杂的公式):

ddxeax=aeax∑i=1n(Xi−X―)2

由于公式的字符定义内容有点多,可能要单独写篇文章整合下。 想知道更多公式字符定义或写法请自行上网搜索相关格式。


Hexo-Butterfly主题高级功能

以下的写法,只适用于Butterfly主题,用在其它主题上不会有效果,甚至可能会报错。使用前请留意。 以下内容摘录于Butterfly主题官方配置教程。

自定义标签

本主题提供了多种不同类型提示标签模块

  • 用法1(预设图标和颜色)
  • 用法2(自定义颜色和图标)
代码语言:javascript复制
MARKDOWN
{% note [class] [no-icon] [style] %}
任何内容
{% endnote %}

名称

用法和参数

class

【可选】图标样式,有不同图标和颜色 可用值: default / primary / success / info / warning / danger

no-icon

【可选】不显示图标,只显示对应的颜色。 可用值:no-icon 或 不写

style

【可选】标签的显示风格 可用值:simple / modern / flat / disabled

把上面表格里的可用参数套入代码指定位置就行 如果没指定参数,则输出markdown默认标签引用区块。

比如我想输出个class为warning,style为modern的标签块可这么写:

代码语言:javascript复制
MARKDOWN
{% note warning modern %}
我是内容
{% endnote %}

输出结果:

我是内容


相册

相册分类盒子,带描述和背景图,实现跳转到某个页面功能,可用于相册页面主页。

代码语言:javascript复制
PLAINTEXT
<div class="gallery-group-main">
{% galleryGroup [name] [description] [link] [img-url] %}
</div>

参数

作用

name

图库名字

description

图库描述文字

link

图库链接

img-url

封面图片链接,可以是网址,也可以是本地文件链接

可以同时嵌套多个galleryGroup,例:

代码语言:javascript复制
PLAINTEXT
<div class="gallery-group-main">
{% galleryGroup "壁纸" "收藏的一些壁纸" "/Gallery/wallpaper" "/Gallery/01/5.jpg" %}
{% galleryGroup "游戏" "一些游戏图片" "/Gallery/games" "/Gallery/02/5.jpg" %}
</div>

效果:

Group Image Gallery

壁纸

收藏的一些壁纸

Group Image Gallery

游戏

一些游戏图片


相册图片自动排版

Gallery相册会自动根据图片宽高进行排版,可用于相册子页面。

代码语言:javascript复制
MARKDOWN
{% gallery %}
![图片描述](图片链接)
{% endgallery %}

直接在gallery标签内使用markdown的插入图片语句: ![图片描述](图片链接) 就行,数量不限。例:

代码语言:javascript复制
MARKDOWN
{% gallery %}
![](/Gallery/02/1.jpg)
![](/Gallery/02/2.jpg)
![](/Gallery/02/3.jpg)
![](/Gallery/02/4.jpg)
![](/Gallery/02/5.jpg)
![](/Gallery/02/6.jpg)
{% endgallery %}

隐藏标签

如果你想把一些文字、内容隐藏起来,并提供按钮让用户点击显示。可以使用这个 有三种模式:inlineBlockToggle

标签内都不建议有 h1 - h6 等标题 因为会在文章目录会读取出来。

  • inline
  • Block
  • Toggle

inline 就是直接在文本行内插入隐藏元素,只限文字,

代码语言:javascript复制
MARKDOWN
{% hideInline content,display,bg,color %}

参数

作用

content

隐藏的文本内容

display

按钮显示的文字(可选),不写则显示Click

bg

按钮的背景颜色(可选)

color

按钮文字的颜色(可选)

content 不能包含英文逗号,可用代替。 背景和颜色可以用Html的16进制表示,也可以用预设单词:blue / pink / red / purple / orange / green,不写则以默认样式输出。例:

代码语言:javascript复制
MARKDOWN
奇变偶不变? {% hideInline 符号看象限,查看答案,black,#fff %}
1 1=? {% hideInline 等于2 %}

输出效果:

奇变偶不变?查看答案 1 1=? Click


mermaid绘图插件

使用mermaid标签可以绘製Flowchart(流程图)、Sequence diagram(时序图 )、Class Diagram(类别图)、State Diagram(状态图)、Gantt(甘特图)和Pie Chart(饼图),具体可以查看: mermaid官方文档

代码语言:javascript复制
MARKDOWN
{% mermaid %}
内容
{% endmermaid %}

mermaid标签不能嵌套在其他隐藏属性的标签里面,会导致输出异常。

查看mermaid官方文档,例如输出个流程图,可以这么写:

代码语言:javascript复制
MARKDOWN
{% mermaid %}
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
{% endmermaid %}

输出结果:

graph TD; A–>B; A–>C; B–>D; C–>D;

由于mermaid内容有点多,可能要单独写篇文章整合下。 想知道更多写法的可以先去网上搜索对应的教程或查看: mermaid官方文档


分页标签

内容类型比较多可以使用,分页标签功能,

代码语言:javascript复制
PLAINTEXT
{% tabs [Unique name], [index] %}
<!-- tab [Tab caption] [@icon] -->
内容
<!-- endtab -->
{% endtabs %}

参数

作用

Unique name

唯一名称,如果Tab caption 未指定,则输出唯一名称 序号,名称不能包含英文逗号:,

index

默认展开的选项卡序号,从1开始,如果未指定,将选择第一个选项卡1,如果为-1,则选项卡全部折叠。

Tab caption

自定义选项卡的标题

@icon

设置自定义图标,仅支持 FontAwesome 图标名全称,名称前需要包含@符号

输出四个选项卡,唯一名称为:测试,默认展开第二个选项卡,可以这么写:

代码语言:javascript复制
MARKDOWN
{% tabs 测试,2 %}

<!-- tab -->
我未指定选项卡名称
<!-- endtab -->

<!-- tab 老二 -->
我设置了选项卡名称
<!-- endtab -->

<!-- tab @fas fa-bomb -->
我的选项卡名称只有图标
<!-- endtab -->

<!-- tab 炸弹@fas fa-bomb -->
我的选项卡名称包含文字和图标
<!-- endtab -->

{% endtabs %}

输出结果:

  • 测试 1
  • 老二
  • 炸弹

我设置了选项卡名称


按钮

可以输出各式各样的按钮。

代码语言:javascript复制
MARKDOWN
{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}

参数

作用

url

链接,打开网址或位置

text

按钮的文字

icon

[可选]按钮的图标,FontAwesome 图标名全称

color

[可选]按钮颜色 可选值: blue / pink / red / purple / orange / green

style

[可选] 按钮样式,默认实心, 可选值: outline 或 留空

layout

[可选] 按钮佈局 默认为line, 可选值: block 或 留空

position

[可选] 按钮位置,前提是设置了layout为block 默认为左边。 可选值: center / right 或 留空

size

[可选] 按钮大小, 可选值:larger 或 留空

下面是各种按钮的写法,其他参数可以自己尝试:

代码语言:javascript复制
MARKDOWN
默认样式按钮:{% btn 'https://guguge.top/',Guguge %}
更大的按钮:{% btn 'https://guguge.top/',Guguge,,larger %}
带图标的按钮:{% btn 'https://guguge.top/',Guguge,fas fa-bomb %}
红色的按钮:{% btn 'https://guguge.top/',Guguge,fas fa-bomb,red %}
不带图标红色的按钮:{% btn 'https://guguge.top/',Guguge,,red %}
默认空心按钮:{% btn 'https://guguge.top/',Guguge,,outline %}
红色空心按钮:{% btn 'https://guguge.top/',Guguge,,red outline %}

输出结果:

默认样式按钮:Guguge 更大的按钮:Guguge 带图标的按钮:Guguge 红色的按钮:Guguge 不带图标红色的按钮:Guguge 默认空心按钮:Guguge 红色空心按钮:Guguge


文本行内插入图片

Markdown默认的插入图片会独占一行,本标签适用于插入一些尺寸较小的图片,例如表情包什么的。

代码语言:javascript复制
MARKDOWN
{% inlineImg [src] [height] %}

参数

作用

url

图片链接

height

[可选] 图片高度限制,

在文本内插入一张表情包,高度限制为:100px。实例:

代码语言:javascript复制
PLAINTEXT
这是一张表情包: {% inlineImg /blog/markdown/md11.jpg 100px %} 

文字底纹

可以给一部分文字设置各种颜色的底纹。

代码语言:javascript复制
MARKDOWN
{% label text color %}

参数

作用

text

文本内容

color

[可选] 颜色,默认为 default 可选值:default / blue / pink / red / purple / orange / green

实例:

代码语言:javascript复制
MARKDOWN
{% label 日照 red %}香炉生{% label 紫烟 purple %},遥看{% label 瀑布 blue %}挂前川。
飞流直下{% label 三千尺 orange %},疑是{% label 银河 pink %}落九天。

输出结果:

日照 香炉生紫烟 ,遥看瀑布 挂前川。 飞流直下三千尺 ,疑是银河 落九天。


Markdown 大全 ⛅

注意: 这是Markdown语法的简体中文版文档。如果您正在寻找英文版 文档。请参考:Markdown: Syntax。

这份文件是用 Markdown 写的,你可以看看它的原始档 。

================

  • 概述
    • 哲学
    • 行内 HTML
    • 特殊字元自动转换
  • 区块元素
    • 段落和换行
    • 标题
    • 区块引言
    • 清单
    • 代码区块
    • 分隔线
  • 区段元素
    • 连结
    • 强调
    • 代码
    • 图片
  • 其它
    • 跳脱字元
    • 自动连结

概述


哲学

Markdown 的目标是实现「易读易写」。

不过最需要强调的便是它的可读性。一份使用 Markdown 格式撰写的文件应该可以直接以纯文字發佈,并且看起来不会像是由许多标签或是格式指令所构成。Markdown 语法受到一些既有 text-to-HTML 格式的影响,包括 [Setext] 1、[atx] 2、[Textile] 3、[reStructuredText] 4、[Grutatext] 5 和 [EtText] 6,然而最大灵感来源其实是纯文字的电子邮件格式。

因此 Markdown 的语法全由标点符号所组成,并经过严谨慎选,是为了让它们看起来就像所要表达的意思。像是在文字两旁加上星号,看起来就像强调。Markdown 的清单看起来,嗯,就是清单。假如你有使用过电子邮件,区块引言看起来就真的像是引用一段文字。


行内 HTML

Markdown 的语法有个主要的目的:用来作为一种网路内容的写作用语言。

Markdown 不是要来取代 HTML,甚至也没有要和它相似,它的语法种类不多,只和 HTML 的一部分有关系,重点不是要创造一种更容易写作 HTML 文件的语法,我认为 HTML 已经很容易写了,Markdown 的重点在于,它能让文件更容易阅读、编写。HTML 是一种發佈的格式,Markdown 是一种编写的格式,因此,Markdown 的格式语法只涵盖纯文字可以涵盖的范围。

不在 Markdown 涵盖范围之外的标签,都可以直接在文件裡面用 HTML 撰写。不需要额外标註这是 HTML 或是 Markdown;只要直接加标签就可以了。

只有区块元素──比如 <div><table><pre><p> 等标签,必须在前后加上空行,以利与内容区隔。而且这些(元素)的开始与结尾标签,不可以用 tab 或是空白来缩排。Markdown 的产生器有智慧型判断,可以避免在区块标签前后加上没有必要的 <p> 标签。

举例来说,在 Markdown 文件裡加上一段 HTML 表格:

代码语言:javascript复制
This is a regular paragraph.

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

This is another regular paragraph.

请注意,Markdown 语法在 HTML 区块标签中将不会被进行处理。例如,你无法在 HTML 区块内使用 Markdown 形式的*强调*

HTML 的区段标签如 <span><cite><del> 则不受限制,可以在 Markdown 的段落、清单或是标题裡任意使用。依照个人习惯,甚至可以不用Markdown 格式,而採用 HTML 标签来格式化。举例说明:如果比较喜欢 HTML 的 <a><img> 标签,可以直接使用这些标签,而不用 Markdown 提供的连结或是影像标示语法。

HTML 区段标签和区块标签不同,在区段标签的范围内, Markdown 的语法是有效的。


特殊字元自动转换

在 HTML 文件中,有两个字元需要特殊处理: <&< 符号用于起始标签,& 符号则用于标记 HTML 实体,如果你只是想要使用这些符号,你必须要使用实体的形式,像是 <&

& 符号其实很容易让写作网路文件的人感到困扰,如果你要打「AT&T」 ,你必须要写成「AT&T」 ,还得转换网址内的 & 符号,如果你要连结到:

代码语言:javascript复制
http://images.google.com/images?num=30&q=larry bird

你必须要把网址转成:

代码语言:javascript复制
http://images.google.com/images?num=30&amp;q=larry bird

才能放到连结标签的 href 属性裡。不用说也知道这很容易忘记,这也可能是 HTML 标准检查所检查到的错误中,数量最多的。

Markdown 允许你直接使用这些符号,但是你要小心跳脱字元的使用,如果你是在HTML 实体中使用 & 符号的话,它不会被转换,而在其它情形下,它则会被转换成 &。所以你如果要在文件中插入一个着作权的符号,你可以这样写:

代码语言:javascript复制
&copy;

Markdown 将不会对这段文字做修改,但是如果你这样写:

代码语言:javascript复制
AT&T

Markdown 就会将它转为:

代码语言:javascript复制
AT&amp;T

类似的状况也会發生在 < 符号上,因为 Markdown 支援 行内 HTML ,如果你是使用 < 符号作为 HTML 标签使用,那 Markdown 也不会对它做任何转换,但是如果你是写:

代码语言:javascript复制
4 < 5

Markdown 将会把它转换为:

代码语言:javascript复制
4 &lt; 5

不过需要注意的是,code 范围内,不论是行内还是区块, <& 两个符号都一定会被转换成 HTML 实体,这项特性让你可以很容易地用 Markdown 写 HTML code (和 HTML 相对而言, HTML 语法中,你要把所有的 <& 都转换为 HTML 实体,才能在 HTML 文件裡面写出 HTML code。)


区块元素


段落和换行

一个段落是由一个以上相连接的行句组成,而一个以上的空行则会切分出不同的段落(空行的定义是显示上看起来像是空行,便会被视为空行。比方说,若某一行只包含空白和 tab,则该行也会被视为空行),一般的段落不需要用空白或断行缩排。

「一个以上相连接的行句组成」这句话其实暗示了 Markdown 允许段落内的强迫断行,这个特性和其他大部分的 text-to-HTML 格式不一样(包括 MovableType 的「Convert Line Breaks」选项),其它的格式会把每个断行都转成 <br /> 标签。

如果你真的想要插入 <br /> 标签的话,在行尾加上两个以上的空白,然后按 enter。

是的,这确实需要花比较多功夫来插入 <br /> ,但是「每个换行都转换为 <br />」的方法在 Markdown 中并不适合, Markdown 中 email 式的 区块引言 和多段落的 清单 在使用换行来排版的时候,不但更好用,还更好阅读。


标题

Markdown 支援两种标题的语法,[Setext] 1 和 [atx] 2 形式。

Setext 形式是用底线的形式,利用 = (最高阶标题)和 - (第二阶标题),例如:

代码语言:javascript复制
This is an H1
=============

This is an H2
-------------

任何数量的 =- 都可以有效果。

Atx 形式则是在行首插入 1 到 6 个 # ,对应到标题 1 到 6 阶,例如:

代码语言:javascript复制
# This is an H1

## This is an H2

###### This is an H6

你可以选择性地「关闭」atx 样式的标题,这纯粹只是美观用的,若是觉得这样看起来比较舒适,你就可以在行尾加上 #,而行尾的 # 数量也不用和开头一样(行首的井字数量决定标题的阶数):

代码语言:javascript复制
# This is an H1 #

## This is an H2 ##

### This is an H3 ######

Blockquotes

Markdown 使用 email 形式的区块引言,如果你很熟悉如何在 email 信件中引言,你就知道怎么在 Markdown 文件中建立一个区块引言,那会看起来像是你强迫断行,然后在每行的最前面加上 >

代码语言:javascript复制
> 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 也允许你只在整个段落的第一行最前面加上 >

代码语言:javascript复制
> 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.

区块引言可以有阶层(例如:引言内的引言),只要根据层数加上不同数量的 >

代码语言:javascript复制
> This is the first level of quoting.
>
> > This is nested blockquote.
>
> Back to the first level.

引言的区块内也可以使用其他的 Markdown 语法,包括标题、清单、代码区块等:

代码语言:javascript复制
> ## 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");

任何标准的文字编辑器都能简单地建立 email 样式的引言,例如 BBEdit ,你可以选取文字后然后从选单中选择增加引言阶层


清单

Markdown 支援有序清单和无序清单。

无序清单使用星号、加号或是减号作为清单标记:

代码语言:javascript复制
*   Red
*   Green
*   Blue

等同于:

代码语言:javascript复制
    Red
    Green
    Blue

也等同于:

代码语言:javascript复制
-   Red
-   Green
-   Blue

有序清单则使用数字接着一个英文句点:

代码语言:javascript复制
1.  Bird
2.  McHale
3.  Parish

很重要的一点是,你在清单标记上使用的数字并不会影响输出的 HTML 结果,上面的清单所产生的 HTML 标记为:

代码语言:javascript复制
<ol>
<li>Bird</li>
<li>McHale</li>
<li>Parish</li>
</ol>

如果你的清单标记写成:

代码语言:javascript复制
1.  Bird
1.  McHale
1.  Parish

或甚至是:

代码语言:javascript复制
3. Bird
1. McHale
8. Parish

你都会得到完全相同的 HTML 输出。重点在于,你可以让 Markdown 文件的清单数字和输出的结果相同,或是你懒一点,你可以完全不用在意数字的正确性。

如果你使用懒惰的写法,建议第一个项目最好还是从 1. 开始,因为 Markdown 未来可能会支援有序清单的 start 属性。

清单项目标记通常是放在最左边,但是其实也可以缩排,最多三个空白,项目标记后面则一定要接着至少一个空白或 tab。

要让清单看起来更漂亮,你可以把内容用固定的缩排整理好:

代码语言:javascript复制
*   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.

但是如果你很懒,那也不一定需要:

代码语言:javascript复制
*   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 会把项目的内容在输出时用 <p> 标签包起来,举例来说:

代码语言:javascript复制
*   Bird
*   Magic

会被转换为:

代码语言:javascript复制
<ul>
<li>Bird</li>
<li>Magic</li>
</ul>

但是这个:

代码语言:javascript复制
*   Bird

*   Magic

会被转换为:

代码语言:javascript复制
<ul>
<li><p>Bird</p></li>
<li><p>Magic</p></li>
</ul>

清单项目可以包含多个段落,每个项目下的段落都必须缩排 4 个空白或是一个 tab :

代码语言:javascript复制
1.  This is a list item 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.

2.  Suspendisse id sem consectetuer libero luctus adipiscing.

如果你每行都有缩排,看起来会看好很多,当然,再次地,如果你很懒惰,Markdown 也允许:

代码语言:javascript复制
*   This is a list item with two paragraphs.

    This is the second paragraph in the list item. You're
only required to indent the first line. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit.

*   Another item in the same list.

如果要在清单项目内放进引言,那 > 就需要缩排:

代码语言:javascript复制
*   A list item with a blockquote:

    > This is a blockquote
    > inside a list item.

如果要放代码区块的话,该区块就需要缩排两次,也就是 8 个空白或是两个 tab:

代码语言:javascript复制
*   A list item with a code block:

        <code goes here>

当然,项目清单很可能会不小心产生,像是下面这样的写法:

代码语言:javascript复制
1986. What a great season.

换句话说,也就是在行首出现数字-句点-空白,要避免这样的状况,你可以在句点前面加上反斜线。

代码语言:javascript复制
1986. What a great season.

代码区块

和程式相关的写作或是标签语言原始码通常会有已经排版好的代码区块,通常这些区块我们并不希望它以一般段落文件的方式去排版,而是照原来的样子显示,Markdown 会用 <pre><code> 标签来把代码区块包起来。

要在 Markdown 中建立代码区块很简单,只要简单地缩排 4 个空白或是 1 个 tab 就可以,例如,下面的输入:

代码语言:javascript复制
This is a normal paragraph:

    This is a code block.

Markdown 会转换成:

代码语言:javascript复制
<p>This is a normal paragraph:</p>

<pre><code>This is a code block.
</code></pre>

这个每行一阶的缩排(4 个空白或是 1 个 tab),都会被移除,例如:

代码语言:javascript复制
Here is an example of AppleScript:

    tell application "Foo"
        beep
    end tell

会被转换为:

代码语言:javascript复制
<p>Here is an example of AppleScript:</p>

<pre><code>tell application "Foo"
    beep
end tell
</code></pre>

一个代码区块会一直持续到没有缩排的那一行(或是文件结尾)。

在代码区块裡面, &<> 会自动转成 HTML 实体,这样的方式让你非常容易使用 Markdown 插入范例用的 HTML 原始码,只需要複製贴上,再加上缩排就可以了,剩下的 Markdown 都会帮你处理,例如:

代码语言:javascript复制
<div class="footer">
    &copy; 2004 Foo Corporation
</div>

会被转换为:

代码语言:javascript复制
<pre><code>&lt;div class="footer"&gt;
    &amp;copy; 2004 Foo Corporation
&lt;/div&gt;
</code></pre>

代码区块中,一般的 Markdown 语法不会被转换,像是星号便只是星号,这表示你可以很容易地以 Markdown 语法撰写 Markdown 语法相关的文件。


分隔线

你可以在一行中用三个或以上的星号、减号、底线来建立一个分隔线,行内不能有其他东西。你也可以在星号中间插入空白。下面每种写法都可以建立分隔线:

代码语言:javascript复制
* * *

***

*****

- - -

---------------------------------------

区段元素


连结

Markdown 支援两种形式的连结语法: 行内参考两种形式。

不管是哪一种,连结的文字都是用 [方括号] 来标记。

要建立一个行内形式的连结,只要在方块括号后面马上接着括号并插入网址连结即可,如果你还想要加上连结的 title 文字,只要在网址后面,用双引号把 title 文字包起来即可,例如:

代码语言:javascript复制
This is [an example](http://example.com/ "Title") inline link.

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

会产生:

代码语言:javascript复制
<p>This is <a href="http://example.com/" title="Title">
an example</a> inline link.</p>

<p><a href="http://example.net/">This link</a> has no
title attribute.</p>

如果你是要连结到同样主机的资源,你可以使用相对路径:

代码语言:javascript复制
See my [About](/about/) page for details.   

参考形式的连结使用另外一个方括号接在连结文字的括号后面,而在第二个方括号裡面要填入用以辨识连结的标签:

代码语言:javascript复制
This is [an example][id] reference-style link.

你也可以选择性地在两个方括号中间加上空白:

代码语言:javascript复制
This is [an example] [id] reference-style link.

接着,在文件的任意处,你可以把这个标签的连结内容定义出来:

代码语言:javascript复制
[id]: http://example.com/  "Optional Title Here"

连结定义的形式为:

  • 方括号,裡面输入连结的辨识用标签
  • 接着一个冒号
  • 接着一个以上的空白或 tab
  • 接着连结的网址
  • 选择性地接着 title 内容,可以用单引号、双引号或是括弧包着

下面这三种连结的定义都是相同:

代码语言:javascript复制
[foo]: http://example.com/  "Optional Title Here"
[foo]: http://example.com/  'Optional Title Here'
[foo]: http://example.com/  (Optional Title Here)

请注意:有一个已知的问题是 Markdown.pl 1.0.1 会忽略单引号包起来的连结 title。

连结网址也可以用方括号包起来:

代码语言:javascript复制
[id]: <http://example.com/>  "Optional Title Here"

你也可以把 title 属性放到下一行,也可以加一些缩排,网址太长的话,这样会比较好看:

代码语言:javascript复制
[id]: http://example.com/longish/path/to/resource/here
    "Optional Title Here"

网址定义只有在产生连结的时候用到,并不会直接出现在文件之中。

连结辨识标签可以有字母、数字、空白和标点符号,但是并区分大小写,因此下面两个连结是一样的:

代码语言:javascript复制
[link text][a]
[link text][A]

预设的连结标签功能让你可以省略指定连结标签,这种情形下,连结标签和连结文字会视为相同,要用预设连结标签只要在连结文字后面加上一个空的方括号,如果你要让 “Google” 连结到 google.com,你可以简化成:

代码语言:javascript复制
[Google][]

然后定义连结内容:

代码语言:javascript复制
[Google]: http://google.com/

由于连结文字可能包含空白,所以这种简化的标签内也可以包含多个文字:

代码语言:javascript复制
Visit [Daring Fireball][] for more information.

然后接着定义连结:

代码语言:javascript复制
[Daring Fireball]: http://daringfireball.net/

连结的定义可以放在文件中的任何一个地方,我比较偏好直接放在连结出现段落的后面,你也可以把它放在文件最后面,就像是註解一样。

下面是一个参考式连结的范例:

代码语言:javascript复制
I get 10 times more traffic from [Google] [1] than from
[Yahoo] [2] or [MSN] [3].

  [1]: http://google.com/        "Google"
  [2]: http://search.yahoo.com/  "Yahoo Search"
  [3]: http://search.msn.com/    "MSN Search"

如果改成用连结名称的方式写:

代码语言:javascript复制
I get 10 times more traffic from [Google][] than from
[Yahoo][] or [MSN][].

  [google]: http://google.com/        "Google"
  [yahoo]:  http://search.yahoo.com/  "Yahoo Search"
  [msn]:    http://search.msn.com/    "MSN Search"

上面两种写法都会产生下面的 HTML。

代码语言:javascript复制
<p>I get 10 times more traffic from <a href="http://google.com/"
title="Google">Google</a> than from
<a href="http://search.yahoo.com/" title="Yahoo Search">Yahoo</a>
or <a href="http://search.msn.com/" title="MSN Search">MSN</a>.</p>

下面是用行内形式写的同样一段内容的 Markdown 文件,提供作为比较之用:

代码语言:javascript复制
I get 10 times more traffic from [Google](http://google.com/ "Google")
than from [Yahoo](http://search.yahoo.com/ "Yahoo Search") or
[MSN](http://search.msn.com/ "MSN Search").

参考式的连结其实重点不在于它比较好写,而是它比较好读,比较一下上面的范例,使用参考式的文章本身只有 81 个字元,但是用行内形式的连结却会增加到 176 个字元,如果是用纯 HTML 格式来写,会有 234 个字元,在 HTML 格式中,标签比文字还要多。

使用 Markdown 的参考式连结,可以让文件更像是浏览器最后产生的结果,让你可以把一些标记相关的资讯移到段落文字之外,你就可以增加连结而不让文章的阅读感觉被打断。


强调

Markdown 使用星号(*)和底线(_)作为标记强调字词的符号,被 *_ 包围的字词会被转成用 <em> 标签包围,用两个 *_ 包起来的话,则会被转成 <strong>,例如:

代码语言:javascript复制
*single asterisks*

_single underscores_

**double asterisks**

__double underscores__

会转成:

代码语言:javascript复制
<em>single asterisks</em>

<em>single underscores</em>

<strong>double asterisks</strong>

<strong>double underscores</strong>

你可以随便用你喜欢的样式,唯一的限制是,你用什么符号开启标签,就要用什么符号结束。

强调也可以直接插在文字中间:

代码语言:javascript复制
un*frigging*believable

但是如果你的 *_ 两边都有空白的话,它们就只会被当成普通的符号。

如果要在文字前后直接插入普通的星号或底线,你可以用反斜线:

代码语言:javascript复制
*this text is surrounded by literal asterisks*

代码

反引号把它包起来(`),例如:

代码语言:javascript复制
Use the `printf()` function.

会产生:

代码语言:javascript复制
<p>Use the <code>printf()</code> function.</p>

如果要在代码区段内插入反引号,你可以用多个反引号来开启和结束代码区段:

代码语言:javascript复制
``There is a literal backtick (`) here.``

这段语法会产生:

代码语言:javascript复制
<p><code>There is a literal backtick (`) here.</code></p>

代码区段的起始和结束端都可以放入一个空白,起始端后面一个,结束端前面一个,这样你就可以在区段的一开始就插入反引号:

代码语言:javascript复制
A single backtick in a code span: `` ` ``

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

会产生:

代码语言:javascript复制
<p>A single backtick in a code span: <code>`</code></p>

<p>A backtick-delimited string in a code span: <code>`foo`</code></p>

在代码区段内,& 和方括号都会被转成 HTML 实体,这样会比较容易插入 HTML 原始码,Markdown 会把下面这段:

代码语言:javascript复制
Please don't use any `<blink>` tags.

转为:

代码语言:javascript复制
<p>Please don't use any <code>&lt;blink&gt;</code> tags.</p>

你也可以这样写:

代码语言:javascript复制
`&#8212;` is the decimal-encoded equivalent of `&mdash;`.

以产生:

代码语言:javascript复制
<p><code>&amp;#8212;</code> is the decimal-encoded
equivalent of <code>&amp;mdash;</code>.</p>

图片

很明显地,要在纯文字应用中设计一个 「自然」的语法来插入图片是有一定难度的。

Markdown 使用一种和连结很相似的语法来标记图片,同样也允许两种样式: 行内参考

行内图片的语法看起来像是:

代码语言:javascript复制
![Alt text](/path/to/img.jpg)

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

详细叙述如下:

  • 一个惊叹号 !
  • 接着一对方括号,裡面放上图片的替代文字
  • 接着一对普通括号,裡面放上图片的网址,最后还可以用引号包住并加上 选择性的 ‘title’ 文字。

参考式的图片语法则长得像这样:

代码语言:javascript复制
![Alt text][id]

「id」是图片参考的名称,图片参考的定义方式则和连结参考一样:

代码语言:javascript复制
[id]: url/to/image  "Optional title attribute"

到目前为止, Markdown 还没有办法指定图片的宽高,如果你需要的话,你可以使用普通的 <img> 标签。


其它


自动连结

Markdown 支援比较简短的自动连结形式来处理网址和电子邮件信箱,只要是用方括号包起来, Markdown 就会自动把它转成连结,连结的文字就和连结位置一样,例如:

代码语言:javascript复制
<http://example.com/>

Markdown 会转为:

代码语言:javascript复制
<a href="http://example.com/">http://example.com/</a>

自动的邮件连结也很类似,只是 Markdown 会先做一个编码转换的过程,把文字字元转成 16 进位码的 HTML 实体,这样的格式可以溷淆一些不好的信箱地址收集机器人,例如:

代码语言:javascript复制
<address@example.com>

Markdown 会转成:

代码语言:javascript复制
<a href="&#x6D;&#x61;i&#x6C;&#x74;&#x6F;:&#x61;&#x64;&#x64;&#x72;&#x65;
&#115;&#115;&#64;&#101;&#120;&#x61;&#109;&#x70;&#x6C;e&#x2E;&#99;&#111;
&#109;">&#x61;&#x64;&#x64;&#x72;&#x65;&#115;&#115;&#64;&#101;&#120;&#x61;
&#109;&#x70;&#x6C;e&#x2E;&#99;&#111;&#109;</a>

在浏览器裡面,这段字串会变成一个可以点击的「address@example.com」连结。

(这种作法虽然可以溷淆不少的机器人,但并无法全部挡下来,不过这样也比什么都不做好些。无论如何,公开你的信箱终究会引来广告信件的。)


跳脱字元

Markdown 可以利用反斜线来插入一些在语法中有其它意义的符号,例如:如果你想要用星号加在文字旁边的方式来做出强调效果(但不用 <em> 标签),你可以在星号的前面加上反斜线:

代码语言:javascript复制
*literal asterisks*

Markdown 支援在下面这些符号前面加上反斜线来帮助插入普通的符号:

代码语言:javascript复制
   反斜线
`   反引号
*   星号
_   底线
{}  大括号
[]  方括号
()  括号
#   井字号
     加号
-    减号
.   英文句点
!   惊叹号

补充

复选框

代码语言:javascript复制
MD
- [x] 复选框 1
- [x] 复选框 2
- [ ] 复选框 3
  • 复选框 1
  • 复选框 2
  • 复选框 3

html 折叠语法

标题

代码语言:javascript复制




当前皮肤支持选项卡

  • 默认
  • 预设选择 tabs
  • 没有预设值
  • 自定义 Tab 名 只有 icon icon 和 Tab 名
代码语言:javascript复制
MD
{% tabs test1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

0 人点赞