欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Markdown语法

程序员文章站 2022-07-12 20:28:48
...

Markdown语法

1) 语义

描述 效果 代码
斜体 斜体 *斜体*
斜体 斜体 _斜体_
粗体 粗体 **粗体**
粗体+斜体 粗体+斜体 ***粗体+斜体***
粗体+斜体 粗体+斜体 **_粗体+斜体_**
删除线 删除线 <del>删除线</del>
键盘文本 Ctrl <kbd>Ctrl</kbd>

注:删除线用~~括起来是不规范语法,有的md编辑器并不支持,比如:MarkdownPad2中的Markdown(扩展)模式就不行,但其github风格则可以,这里CSDN也支持。


2) 标题与TOC

#的数量来表示标题的字体大小,如:

#--###### Hx 即表示: H1--H6

注:#与标题之间必须有空格;最多可支持6级标题,此后的级数效果等同于6级。

在有些md编辑器中,还支持TOC生成。文章使用了各级标题,则只要用[TOC]就可以了。


3) 有序列表

数字序号后加.号,并空格,如:

  1. 序号1
  2. 序号2
  3. 序号3

还可以使用嵌套,如:

  1. 序号1

    1. 子序号1
    2. 子序号2
  2. 序号2

  3. 序号3

4) 无序列表

使用*或+或-符号,并空格,如:
*序号的效果为:

  • 序号

+序号的效果为:

  • 序号

-序号的效果为:

  • 序号

注: +或*或-在同级的列表序号中最好不要混合使用,它们可以混用于嵌套格式(如下例子)。

还可以将有序和无序嵌套,如(但CSDN不支持,MarkdownPad2支持):
一级序号使用的是有序列表;二级序号使用的*符号;三级序号使用的是+符号;四级序号使用的是-符号。但可以看到三、四级序号的符号是一样的。

1. 序号1
    * 二级序号
        + 三级序号1
        + 三级序号2
            - 四级序号1
            - 四级序号2 
2. 序号2

在MarkdownPad2中用上面的方法,会显示为:
Markdown语法
但,CSDN这里会自动把无序列表也变为下级有序列表。


5) 引用

单行式:
> Hello World!
效果为:

Hello World!

多行式:

> Hello World!  
> Hello World!  
> Hello World!

效果为:

Hello World!
Hello World!
Hello World!

多级嵌套式:

> Hello World!  
>> Hello World!  
>>> Hello World!

效果为:

Hello World!

Hello World!

Hello World!


6) 行内标记及段落内代码

在行内使用`可以将其括起来的内容进行行内标记,如:

可使用`Ctrl+F`来调出搜索框

则显示效果为:
可使用Ctrl+F来调出搜索框

再比如,段落内代码使用“`符号括起来则可以插入代码:

def addnumber(a, b):  
    """
    Add two numbers together
    Returns
    ------
    the_sum : type of arguments
    """
return a+b

注: 在第一行可以标注编程语言,比如这里的python。代码段落要与前面的内容之间间隔一行,否则代码内无法换行。另,这种模式在MarkdownPad2的Markdown(扩展)模式下并不能有效使用,只能使用下面的代码区块方式。


7) 代码区块

代码区块方式是插入代码段落,使用Tab来起头,如:

    def addnumber(a, b):  
        """
        Add two numbers together
        Returns
        ------
        the_sum : type of arguments
        """
    return a+b

其效果同上面:

def addnumber(a, b):  
    """
    Add two numbers together
    Returns
    ------
    the_sum : type of arguments
    """
return a+b

注:这种方式同样需要在第一行前空格一行。另外,这种方式并不太好按照惯例来标示编程语言的类型,在能够支持高亮显示的编辑器中也无法有效显示,这点并不是很方便和实用。


8) 表格

这里以前面”语义”中表格的前两行作为示例。
其代码为:

描述|效果|代码
:-:|:-:|:-:
斜体|*斜体*|\*斜体\*

这里使用的是简洁表示法,完整的语法左右两边也应该有|符号。
表格的代码第一行为表头。第二行为表格的形式控制,默认为左对齐,即符号-来表示,当然也可以使用:-来表示左对齐,:-:表示居中,-:则表示右对齐;其中-符号可以有很多个,以表示占位或美观。
下面用完整的语法表示修改上面的表格前两行,并且第一列用左对齐,第二列居中,第三列右对齐。则代码为:

|描述|效果|代码|
|:---|:---:|---:|
|斜体|*斜体*|\*斜体\*|

显示如下(第三行只是为了使对齐方式更为明显而临时添加的)(CSDN对齐显示语法不支持??):

描述 效果 代码
斜体 斜体 *斜体*
============== ============= =============

如果是较为复杂的表格,尤其是那种单位格有合并,并呈现不规则表格的情况。建议使用其他表格生成器,再转码过来。
比如:Tables Generator,该网站支持Markdown、LaTex、HTML等格式的表格代码生成。


9) 插入链接

一种是网络链接,如前面的Tables Generator那个链接。其表示方法为:

[Tables Generator](http://www.tablesgenerator.com/)

[Tables Generator][1]
[1]: http://www.tablesgenerator.com/

一般来说,第二种方法的兼容性更好些,更容易由第三方软件直接跳转打开链接;并且这种方法每个链接对应了一个序号(这里就是用[1]表示的),为了便于排版和统筹,通常可以把代码的第二行,即指定链接统一放在文章最末尾。

另一种则是本地链接,比如,需要链接本地的某个文档等。其表示方法为:

[点击查看这个文档](./XXX.docx)

[点击查看这个文档][2]
[2]: ./XXX.docx

注:需要注意这里用的路径是相对路径,当然也可以使用绝对路径,但无论哪种方式都要注意文件夹命名变更或移动等可能会造成的链接失效的问题。这里的.号表示的是当前文件路径的意思(如果XXX.docx就与当前文档位于同一文件路径下的话就可以这么引用)。

特别地,说明下邮箱链接:
<>内直接输入邮箱地址就能生成带链接的邮箱形式,如:

<XXX@gmail.com>

就能得到:
[email protected]


10) 插入图片

类似的,一种是插入网络链接式的图片。这里以插入百度搜索首页的logo图片为例:
代码为:

![][3]
[3]: https://www.baidu.com/img/bd_logo1.png?where=super

![](https://www.baidu.com/img/bd_logo1.png?where=super)

效果为:
Markdown语法
注:同样的,这里的上面那种代码方式更便于排版和统筹,可以将链接序号统一放置于文末。

另一种是插入本地图片内容。这里以一张Google的doodle保存为本地图片为例:
这里将该图片命名为doodle,并放置于与当前文档同一文件夹下(图片取自2018-7-1的Google doodle,纪念莱布尼茨诞辰372周年)。
代码为:

![](./doodle.png)

![][4]
[4]: ./doodle.png

效果为:
Markdown语法
(Google Doodle: 纪念莱布尼茨诞辰372周年,取自2018-07-01)

注:插入图片的链接中必须要包含文件后缀名,不能省略。还可以添加图片注释或说明。

假如要调整插入图片的位置、大小,则可以使用HTML的iframe框架来设置。
这里以插入百度Logo为例,设置为居中,并调整下大小:

<div align=center><img width='150' height='100' src="https://www.baidu.com/img/bd_logo1.png?where=super"></div>

效果为:

Markdown语法

11) 插入音乐、视频等(兼容性一般)

Markdown本身是不支持这些多媒体形式的插入的,所以使用的方法都是iframe框架的语法。当然,这就要取决于待插入内容是否支持iframe了。
这里以插入网易云音乐的歌曲为例。复制歌曲外链接。注意,不是分享链接,是外链接,如图:
Markdown语法
点击“生成外链播放器”后,复制iframe的代码

然后使用iframe插入(如果不想自动播放,将链接中的auto改为0)
注:这个兼容性一般,有的Markdown支持,有的不行。CSDN和MaHua支持,MarkdownPad2会显示插入错误,Dillinger插入则完全无效。

<div align=center><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width='330' height='86' src="//music.163.com/outchain/player?type=2&id=489970551&auto=0&height=66"></iframe></div>

插入效果为:

同样的,插入视频也是使用这种方法。
下面以插入B站视频为例:

<iframe width='560' height='310' src='//player.bilibili.com/player.html?aid=16577449&cid=27038097&page=1' frameborder="no" framespacing="0" allowfullscreen></iframe>

插入效果为:

还有一种方法就是伪画面,提供跳链来播放。也就是插入图片,并将其指定为音乐或视频的外链接(这里略过)。


12) 公式(兼容性一般)

MarkdownPad2需要MathJax才能支持HTML页面的公式显示。
其添加MathJax支持的方法: Tool-Option-Advance-HTML Head编辑器中添加下面代码:

<script type="text/javascript"
   src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

这时,行间公式使用”$$”括起来,会居中显示(虽然没有即时显示,但F6在HTML界面可显示):

$$ E=mc^2 $$

E=mc2

行内公式使用下面的方式括起来(同样F6在HTML界面才正常显示):

这是质能公式:\\( E=mc^2 \\)

不过,在有的Markdown编辑器里(如:CSDN)则是另一种公式支持方式。CSDN对TeX语法支持很好。
行间公式使用”$$”括起来:

$$ E=mc^2 $$

E=mc2

行内公式则使用”$”括起来:

这是质能公式:$ E=mc^2 $

这是质能公式:E=mc2


13) 任务列表(兼容性一般)

使用-[]来生成任务待选空框,填入x则表示打勾(CSDN不支持,有道笔记支持)。

-[] 待办事项1
-[] 待办事项2
-[x] 待办事项3

14) 分隔符

至少使用三个***或—

***
---

效果如下及已在每个部分间隔处使用


15) 设置不同字体、字号、字体颜色等

改变的方法同HTML语法,color指定字体颜色,可以使用指定颜色名或16位代码或rgb值(网上查询下就能找到对照表);size指定大小;face指定字体名(系统需安装该字体,且字体名需要注意下是否能正确调用)。另外,还可以用设置table来为文字添加背景色,语法见下面的最后一个例子,设置背景色的参数是bgcolor。

下面是一些举例:

<font color=red size=3 face="黑体">使用红色字体,3号字号,黑体</font>

使用红色字体,3号字号,黑体

<font color=#9400D3 size=5 face="华文彩云">华文彩云</font>

华文彩云

<font color=0 0 0 size=4 face="Arial">The quick brown fox jumps over the lazy dog</font>

The quick brown fox jumps over the lazy dog

<font color=#B03060 size=6 face="Times">The quick brown fox jumps over the lazy dog</font>

The quick brown fox jumps over the lazy dog

<table><tr><td bgcolor=#00000><font color=#FFFFFF face="COCON" size=4>The quick brown fox jumps over the lazy dog</font></td></tr></table>
The quick brown fox jumps over the lazy dog

注:若结尾不加</font> 等来表示指定结束,则设置会对后续的文字都有影响。


16) 表情(兼容性一般)

Emoji表情代码可参见:EMOJI CHEAT SHEET
这里仅举几个例子(CSDN不支持,MarkdownPad2支持):

很赞同:+1:
感谢您的帮忙:heart:
笑死:joy::joy::joy:

17) 脚注(兼容性一般)

脚注使用符号[^序号]的方式来引注,脚注内容再用[^序号]:来指定,脚注会在文末列出。
举例:

编辑器很多,兼容性一般则是指在有的编辑器中有效,有的则无效[^1][^1]: 具体视编辑器情况而定。主要是指网页端的CSDNMaHua,离线端的MarkdownPad2

编辑器很多,兼容性一般则是指在有的编辑器中有效,有的则无效 1


18) 流程图(兼容性一般)

流程图包含定义和连接两类参数:

定义 实际参数 含义
start st 开始
end e 结束
operation op 操作
subroutine sub 子程序
condition cond 条件
inputoutput io 输入或输出
content 标签,即:后的内容 内容
url / 链接

连接则主要包含了布尔逻辑值和方向。

下面举两个例子:

```flow
st=>start: 开始
op=>operation: 操作
cond=>condition: 条件
e=>end: 结束

st->op->cond->e
cond(yes,down)->e
cond(no)->op
```
Created with Raphaël 2.1.2开始操作条件结束yesno
```flow
st=>start: 启动|past:>http://www.baidu.com[blank]
e=>end: 结束
op1=>operation: 方案一
sub2=>subroutine: 方案二|approved:>http://www.baidu.com[_parent]
sub3=>subroutine: 重新制定方案
cond1=>condition: 行不行?|request
cond2=>condition: 行不行?
io=>inputoutput: 结果满意

st->op1->cond1
cond1(no,right)->sub2->cond2(no,right)->sub3(right)->op1
cond1(yes)->io->e
cond2(yes)->io->e
```
Created with Raphaël 2.1.2启动方案一行不行?结果满意结束方案二行不行?重新制定方案yesnoyesno

19) 时序图(兼容性一般)

时序图最主要的元素是连接和注释:

符号 含义
> 实心箭头
- 实线
>> 空心箭头
-- 虚线
Note right of 在时间轴右方注释
Note left of 在时间轴左方注释

举个例子:

```sequence
出门->上班: 不要迟到
上班->午休: 午餐及午睡
上班->下班: 
Note right of 下班: 下班尽早回家
下班->回家:
Note right of 回家: 安全到家了
回家-->>出门:
Note left of 出门: 晚餐、夜休,新的一天
```
Created with Raphaël 2.1.2出门出门上班上班午休午休下班下班回家回家不要迟到午餐及午睡下班尽早回家安全到家晚餐、夜休,新的一天

  1. 具体视编辑器情况而定。主要是指网页端的CSDN、MaHua,离线端的MarkdownPad2。