AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

markdown syntax

2018-08-04 1488
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Markdown 语法转载自https://zh.mweb.im/markdown.html首先应该了解的每一个 Markdwon 使用者都应该了解的，是 Markdown 最基本的版本，也就是最官方的版本。

Markdown 语法

转载自https://zh.mweb.im/markdown.html

首先应该了解的

每一个 Markdwon 使用者都应该了解的，是 Markdown 最基本的版本，也就是最官方的版本。它是如何创造出来的？它的设计哲学和语法是什么？如果你没看过，建议一定要看看这篇：Markdown 語法官方說明繁體中文版 。

MWeb 采用的语法是 Github Flavored Markdown 语法，简称 GFM 语法，GFM 是官网版本的扩展版，除了支持官方的语法外，还支持表格、TOC、LaTeX、代码块、任务列表、脚注等。

另外 MWeb 在兼容 GFM 语法的基础上，还扩展支持两种比较有用的语法：画图支持（mermaid, viz, echarts, plantuml, sequence, flow）和设置图片宽度，下面会仔细说明。

Markdown 的设计哲学

Markdown 的目標是實現「易讀易寫」。 不過最需要強調的便是它的可讀性。一份使用 Markdown 格式撰寫的文件應該可以直接以純文字發佈，並且看起來不會像是由許多標籤或是格式指令所構成。 Markdown 的語法有個主要的目的：用來作為一種網路內容的寫作用語言。

本文约定

如果有写 效果如下：， 在 MWeb 编辑状态下只有用 CMD + 4 或 CMD + R 预览才可以看效果。你可以直接下载本文然后在 MWeb 中打开以查看效果，下载网址为：下载本文 Markdown

标题

Markdown 语法：

# 第一级标题 `<h1>` 
## 第二级标题 `<h2>` 
###### 第六级标题 `<h6>`

效果如下：

第一级标题 <h1>

第二级标题 <h2>

第六级标题 <h6>

强调

Markdown 语法：

*这些文字会生成`<em>`*
_这些文字会生成`<u>`_

**这些文字会生成`<strong>`**
__这些文字会生成`<strong>`__

在 MWeb 中的快捷键为： CMD + U、CMD + I、CMD + B 效果如下：

这些文字会生成<em> 这些文字会生成<u>

这些文字会生成<strong> 这些文字会生成<strong>

换行

四个及以上空格加回车。 如果不想打这么多空格，只要回车就为换行，请打开 偏好设置 - 主题&样式 勾选：把换行转为 <br /> 标签，这项默认是勾选状态的。

列表

无序列表

Markdown 语法：

* 项目一 无序列表 `* + 空格键`
* 项目二
	* 项目二的子项目一 无序列表 `TAB + * + 空格键`
	* 项目二的子项目二

在 MWeb 中的快捷键为： Option + U 效果如下：

  • 项目一 无序列表 * + 空格键
  • 项目二
    • 项目二的子项目一 无序列表 TAB + * + 空格键
    • 项目二的子项目二

有序列表

Markdown 语法：

1. 项目一 有序列表 `数字 + . + 空格键`
2. 项目二 
3. 项目三
	1. 项目三的子项目一 有序列表 `TAB + 数字 + . + 空格键`
	2. 项目三的子项目二

效果如下：

  1. 项目一 有序列表 数字 + . + 空格键
  2. 项目二
  3. 项目三
    1. 项目三的子项目一 有序列表 TAB + 数字 + . + 空格键
    2. 项目三的子项目二

任务列表（Task lists）

Markdown 语法：

- [ ] 任务一 未做任务 `- + 空格 + [ ]`
- [x] 任务二 已做任务 `- + 空格 + [x]`

效果如下：

  • 任务一 未做任务 - + 空格 + [ ]
  • 任务二 已做任务 - + 空格 + [x]

图片

Markdown 语法：

![图片描述](https://zh.mweb.im/asset/img/set-up-git.gif)
格式: ![图片描述](url)

Control + Shift + I 可插入Markdown语法。 如果是 MWeb 的文档库中和外部模式中引入的文件夹中的文档，还可以用截图并粘贴、复制并粘贴、拖拽等方式插入图片。

效果如下：

图片描述

MWeb 引入的特别的语法来设置图片宽度，方法是在图片描述后加 -w + 图片宽度 即可，比如说要设置上面的图片的宽度为 140，语法如下：

![图片描述-w140](https://zh.mweb.im/asset/img/set-up-git.gif)

图片描述-w140

在 MWeb 中，你还可以设置图片的对齐，以上面的图片为例子，左对齐为 -l140，居中为 -c140，居右为 -r140。

图片描述-c140

链接

Markdown 语法：

email <example@example.com>
[GitHub](http://github.com)
自动生成连接  <http://www.github.com/>

Control + Shift + L 可插入Markdown语法。 如果是 MWeb 的文档库中和外部模式中引入的文件夹中的文档，拖放或 CMD + Option + I 导入非图片时，会生成连接。 效果如下：

Email 连接： example@example.com 连接标题Github网站 自动生成连接像： http://www.github.com/ 这样

区块引用

Markdown 语法：

某某说:
> 第一行引用
> 第二行费用文字

CMD + Shift + B 可插入Markdown语法。 效果如下：

某某说:

第一行引用 第二行费用文字

行内代码

Markdown 语法：

像这样即可：`<addr>` `code`

CMD + K 可插入Markdown语法。 效果如下：

像这样即可：<addr> code

多行或者一段代码

Markdown 语法：

```js
function fancyAlert(arg) {
  if(arg) {
    $.facebox({div:'#foo'})
  }

}
```

CMD + Shift + K 可插入Markdown语法。 效果如下：

function fancyAlert(arg) {
	if(arg) {
		$.facebox({div:'#foo'})
	}

}

MWeb 画图

mermaid

mermaid 是比较流行的画图库，它支持流程图、顺序图和甘特图，它的官网为：https://mermaidjs.github.io/ ，在 MWeb 中使用 mermaid 的语法就是声明代码块的语言为 mermaid，代码块中再写上 mermaid 的画图语法即可，你可以把下面的语法复制到 MWeb 中查看效果。

```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->John: Hello John, how are you?
    loop Healthcheck
        John->John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->Alice: Great!
    John->Bob: How about you?
    Bob-->John: Jolly good!
```

效果如下：

sequenceDiagram participant Alice participant Bob Alice->John: Hello John, how are you? loop Healthcheck John->John: Fight against hypochondria end Note right of John: Rational thoughts <br/>prevail... John-->Alice: Great! John->Bob: How about you? Bob-->John: Jolly good!

Graphviz

Graphviz 是开源的画图软件，它的官网为 http://www.graphviz.org/。MWeb 采用的是 Graphviz 的 js 版本的实现 http://viz-js.com/，可以解析 Graphviz 语法以生成图片。你可以将以下语法复制到 MWeb 中进行尝试。在尝试时可以把 dot 换成 circo, fdp, neato, osage, twopi 这几种来尝试效果。

```dot
# http://www.graphviz.org/content/cluster
digraph G {

	subgraph cluster_0 {
		style=filled;
		color=lightgrey;
		node [style=filled,color=white];
		a0 -> a1 -> a2 -> a3;
		label = "process #1";
	}

	subgraph cluster_1 {
		node [style=filled];
		b0 -> b1 -> b2 -> b3;
		label = "process #2";
		color=blue
	}
	start -> a0;
	start -> b0;
	a1 -> b3;
	b2 -> a3;
	a3 -> a0;
	a3 -> end;
	b3 -> end;

	start [shape=Mdiamond];
	end [shape=Msquare];
}
```

效果如下：

# http://www.graphviz.org/content/cluster
digraph G {
    
	subgraph cluster_0 {
		style=filled;
		color=lightgrey;
		node [style=filled,color=white];
		a0 -> a1 -> a2 -> a3;
		label = "process #1";
	}
    
	subgraph cluster_1 {
		node [style=filled];
		b0 -> b1 -> b2 -> b3;
		label = "process #2";
		color=blue
	}
	start -> a0;
	start -> b0;
	a1 -> b3;
	b2 -> a3;
	a3 -> a0;
	a3 -> end;
	b3 -> end;
    
	start [shape=Mdiamond];
	end [shape=Msquare];
}

echarts

echarts 是百度出口的 js 画图库，它的网址为：http://echarts.baidu.com/index.html，功能非常强大，MWeb 支持 echarts 的一些基本的用法，太高级的不支持。你可以将以下语法复制到 MWeb 中进行尝试。你也可以去 http://echarts.baidu.com/examples/index.html 这个网址查看一些例子，要注意的是 MWeb 只能解析 option = {} 这种简单的，不过应该是足够使用了。

```echarts
option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};
```

效果如下：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

plantuml

plantuml 的网址为：http://www.plantuml.com/，直接上去看更能了解。MWeb 对 plantuml 的支持的方式是引用 plantuml 服务器生成的图片，你可以将以下语法复制到 MWeb 中进行尝试。

```plantuml
@startuml

User -> (Start)
User --> (Use the application) : A small label

:Main Admin: ---> (Use the application) : This is\nyet another\nlabel

@enduml
```

效果如下：

@startuml
    
User -> (Start)
User --> (Use the application) : A small label
    
:Main Admin: ---> (Use the application) : This is\nyet another\nlabel
    
@enduml

顺序图和流程图

顺序图和流程图是使用 http://bramp.github.io/js-sequence-diagrams/, http://adrai.github.io/flowchart.js/ 这两个画图库，以下是它在 MWeb 中的 Markdown 语法。

```sequence
张三->李四: 嘿，小四儿, 写博客了没?
Note right of 李四: 李四愣了一下，说：
李四-->张三: 忙得吐血，哪有时间写。
```

```flow
st=>start: 开始
e=>end: 结束
op=>operation: 我的操作
cond=>condition: 确认？

st->op->cond
cond(yes)->e
cond(no)->op
```

效果如下：

张三->李四: 嘿，小四儿, 写博客了没?
Note right of 李四: 李四愣了一下，说：
李四-->张三: 忙得吐血，哪有时间写。

st=>start: 开始
e=>end: 结束
op=>operation: 我的操作
cond=>condition: 确认？

st->op->cond
cond(yes)->e
cond(no)->op

表格

Markdown 语法：

第一格表头 | 第二格表头
--------- | -------------
内容单元格 第一列第一格 | 内容单元格第二列第一格
内容单元格 第一列第二格 多加文字 | 内容单元格第二列第二格

效果如下：

第一格表头 第二格表头
内容单元格 第一列第一格 内容单元格第二列第一格
内容单元格 第一列第二格 多加文字 内容单元格第二列第二格

删除线

Markdown 语法：

加删除线像这样用： ~~删除这些~~

效果如下：

加删除线像这样用： 删除这些

分隔线

以下三种方式都可以生成分隔线：

***

*****

- - -

效果如下：

LaTeX （MathJax 渲染）

Markdown 语法：

块级公式：
$$	x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$

\\[ \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} =
1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}}
{1+\frac{e^{-8\pi}} {1+\ldots} } } } \\]

行内公式： $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$

效果如下（如果没看到公式，请勾选 偏好设置 - 主题&样式 - 启用 LaTeX（MathJax） 即可）：

块级公式： x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a}

\[ \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\ldots} } } } \]

行内公式： \Gamma(n) = (n-1)!\quad\forall n\in\mathbb N

脚注（Footnote）

Markdown 语法：

这是一个脚注：[^sample_footnote]

效果如下：

这是一个脚注：1

注释和阅读更多

Actions->Insert Read More Comment 或者 Command + . 注 阅读更多的功能只用在生成网站或博客时，插入时注意要后空一行。

TOC

Markdown 语法：

[TOC]

效果如下：

TOC

  1. 这里是脚注信息↩

文章标签：
JavaScript
nkbai
目录
相关文章
小王老师呀
|
2月前
【LaTex、markdown】常用语法写出漂亮的blog
【9月更文挑战第9天】本文介绍了使用LaTeX和Markdown编写美观博客的方法。LaTeX方面，需定义文档类型、设置标题与作者，并利用特定命令处理文本格式、列表、数学公式、图片和超链接。Markdown则通过井号表示标题级别，使用星号或下划线标记文本，简化列表和公式的编写，并以直观方式插入图片和链接。两者均可通过合理布局提升博客的可读性和视觉效果。
小王老师呀
51 8
GoodTime
|
C++ C语言
MarkDown 常用语法
## 一、标题 最为常用的格式，只需要在文本前面加上 `#` 即可，同理、你还可以增加二级标题、三级标题、四级标题、五级标题和六级标题，总共六级，只需要增加 `#` 即可，标题字号相应降低 # 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题 ###### 注：1）# 和[标题]之间需保留一个字符的空格，这是最标准的MarkDown写法；2）只有一级到六级标题（最多六级）。 ## 二、首行缩进、换行、空行、对齐方式 ##### 首行缩进 在 Markdown 中，`&emsp;`或`&#8195;` // 全角
GoodTime
99 1
MarkDown 常用语法
代码与野兽
|
Linux iOS开发 MacOS
5分钟学会 markdown
5分钟学会 markdown
代码与野兽
112 0
想你依然心痛
Markdown实用语法
Markdown实用语法
想你依然心痛
76 0
时雨h
|
uml
Markdown总结
Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档。 Markdown 语言在 2004 由约翰·格鲁伯（英语：John Gruber）创建。 Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。 Markdown 编写的文档后缀为 .md, .markdown。 Markdown 能被使用来撰写电子书，如：Gitbook。
时雨h
110 0
clichong
【Markdown】Markdown的安装与配置
【Markdown】Markdown的安装与配置
clichong
609 0
【Markdown】Markdown的安装与配置
码农技术君
markdown常用语法
markdown常用语法
码农技术君
103 0
markdown常用语法
冴羽
|
JavaScript 前端开发
有的时候我觉得我不会 Markdown
「这是我参与2022首次更文挑战的第6天，活动详情查看：2022首次更文挑战」。
冴羽
148 0
有的时候我觉得我不会 Markdown
游客q7aiz7vku45zk
|
C++
你还不会使用 Markdown？
Markdown 是一种轻量级标记语言，创始人为约翰·格鲁伯(John Gruber)。 它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的 XHTML(或者HTML) 文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性，由于 Markdown 的轻量化、易读、易写特性，并且对于图片，图表、数学式都有支持，许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。
游客q7aiz7vku45zk
101 0
你还不会使用 Markdown？
卓上
Markdown 常用语法
记录markdown常用语法，不定时补充更新。
卓上
1083 0