最近更新: 2018年05月08日;
1. Markdown是什么
简单来讲,Markdown就是一种标记语言,简单方便。
最大的优点是,在如今各种强大的文本编辑器横飞的时代,Markdown返璞归真,坚持使用纯文本编写文档,所见即所得。
由于它的纯文本特点,使得它几乎能用所有的文本编辑器方便打开,另外还能方便的转换为Html格式。
如今它不仅被程序员们使用着,而且也受到了广大文字编辑爱好者的追捧。
Markdown 语法受到一些既有 text-to-HTML 格式的影响,包括 Setext、atx、Textile、reStructuredText、Grutatext和EtText,而最大灵感来源其实是纯文本电子邮件的格式。
详情请见维基百科——Markdown.
2. 为什么选择使用Markdown
选择总是需要理由。我们选择使用Markdown,自然是它有足够吸引人的好处。
显而易见的几条列举如下:
纯文本,所以兼容性极强,可以用所有文本编辑器打开。
格式转换方便,Markdown 的文本你可以轻松转换为 html、电子书等。
Markdown 的标记语法有极好的可读性。
让你专注于文字而不是排版。
不限于以上几点,更多待你体会。
3. 使用什么工具学习
由于Markdown的“所见即所得”的特性,如果你能选用一种所见即所得的文本编辑器,即有预览的文本编辑器去编写,上手起来简直飞快。
推荐两种,个人使用过的如下:
- Cmd(在线 Markdown编辑阅读器),需要登录,不过注册简单。
- 简书的自带Markdown编辑器,也需要登录,注册也很简单。
4. 开始学Markdown
-
4.1 Markdown的基本符号
- Markdown符号:*,-,+.三个符号是等效的,任选一个习惯使用的即可。
- 空白行,表示另起一个段落。
- 区块引用符号:> ; 行内引用符号:`.
-
4.2 文本样式
- 标题
标题样式共有六种,对应于html中的h1~h6,对应的符号是#~######,将其作为对应大小标题的前缀即可。
示例代码编辑如下:
# 标题h1
## 标题h2
### 标题h3
#### 标题h4
##### 标题h5
###### 标题h6
文本中显示效果如下:
标题h1
标题h2
标题h3
标题h4
标题h5
标题h6
- 强调
使用符号*与底线(_),选一个习惯喜欢的即可。被 一个* 或 _ 包围的字词会有斜体效果,用两个* 或 _ 包起来的话,则会加粗。
示例代码编辑如下:
*此处为斜体*
**此处加粗**
***此处为斜体且加粗***
_此处为斜体_
__此处加粗__
___此处为斜体且加粗___
文本中显示效果如下:
此处为斜体
此处加粗
此处为斜体且加粗此处为斜体
此处加粗
此处为斜体且加粗
-
4.3 段落
一个 Markdown 段落是由一个或多个连续的文本行组成,它的前后要有一个以上的空行(空行的定义是显示上看起来像是空的,便会被视为空行。比方说,若某一行只包含空格和制表符,则该行也会被视为空行)。普通段落不该用空格或制表符来缩进。
示例代码编辑如下:
这是第一段,任何美的艺术品都不可能没有一点瑕疵,但真正的美却一定能够掩盖这些瑕疵。
这是第二段,任何美的艺术品都不可能没有一点瑕疵,但真正的美却一定能够掩盖这些瑕疵。
---------------------上边没有隔空行,下边有------------------------
这是第一段,任何美的艺术品都不可能没有一点瑕疵,但真正的美却一定能够掩盖这些瑕疵。
这是第二段,任何美的艺术品都不可能没有一点瑕疵,但真正的美却一定能够掩盖这些瑕疵。
文本中显示效果如下:
这是第一段,任何美的艺术品都不可能没有一点瑕疵,但真正的美却一定能够掩盖这些瑕疵。
这是第二段,任何美的艺术品都不可能没有一点瑕疵,但真正的美却一定能够掩盖这些瑕疵。---------------------上边没有隔空行,下边有----------------------
这是第一段:任何美的艺术品都不可能没有一点瑕疵,但真正的美却一定能够掩盖这些瑕疵。这是第二段,任何美的艺术品都不可能没有一点瑕疵,但真正的美却一定能够掩盖这些瑕疵。
不过值得注意的是,有的编辑器比较智能,编辑时直接换行也行,不过Markdown的语法要求如上。
另外,由于Markdown中的段落定义是由一个或多个连续的文本组成,中间的多个空格和tab会被认为是一个空格。但是有时候确实需要这样的空格或tab缩进格式时怎么办?
方法如下:在需要的地方插入
- 半方大的空白:
 
或 
- 全方大的空白:
 
或 
- 不断行的空白格:
或 
最后如果希望强制换行,可以在行尾插入 2 个以上的空格实现。
-
4.4 列表
Markdown 支持有序列表和无序列表。可以支持嵌套。
无序列表使用*、-或是+作为列表标记,注意:符号与文本之间要有空格
。
-
无序列表:
示例代码编辑如下:
* 无序列表文本一
* 无序列表文本二
* 无序列表文本三
或者:
- 无序列表文本一
- 无序列表文本二
- 无序列表文本三
亦或:
+ 无序列表文本一
+ 无序列表文本二
+ 无序列表文本三
文本效果都为:
- 无序列表文本一
- 无序列表文本二
- 无序列表文本三
-
有序列表:
使用数字+英文点+空格表示。
示例代码编辑如下:
1. 有序列表文本一
2. 有序列表文本二
3. 有序列表文本三
文本显示效果如下:
- 有序列表文本一
- 有序列表文本二
- 有序列表文本三
关于嵌套, 相邻列表不隔空行,代表嵌套。
-
4.5 引用
区块引用符号:>; 行内引用符号:`;代码区块引用见下。
- 区块引用
允许嵌套,区块引用内部仍遵循Markdown语法。
示例代码编辑如下:
有一句关于人生的格言引述如下:
>人生就是不断的战斗,唯有死亡方得片刻的安宁
文本显示效果如下:
有一句关于人生的格言引述如下:
人生就是不断的战斗,唯有死亡方得片刻的安宁
由于本身本篇文章的叙述即是使用区块引用,于是总体上显示出了嵌套的效果,因此嵌套也就不再赘述了,连续使用>符号即可。
- 行内引用
示例代码编辑如下:
人不可有`傲气`,但不可无`傲骨`。——徐悲鸿
文本显示效果如下:
人不可有
傲气
,但不可无傲骨
。——徐悲鸿
- 代码区块
和程序相关的写作或是标签语言原始码通常会有已经排版好的代码区块,通常这些区块我们并不希望它以一般段落文件的方式去排版,而是照原来的样子显示。
要在 Markdown 中建立代码区块很简单,只要简单地隔空行,然后缩进 4 个空格或是 1 个制表符
就可以。
示例代码编辑如下:
我们有一段javascript代码引用如下:
if (args.length && rUrl.test(args[0])){
thumbnail = args.shift();
}
文本显示效果如下:
我们有一段javascript代码引用如下:
if (args.length && rUrl.test(args[0])){ thumbnail = args.shift(); }
-
4.6 水平分割线
要生成水平分割线,可以在单独一行里输入3个或以上的短横线、星号或者下划线实现。短横线和星号之间可以输入任意空格。
示例代码编辑如下:
* * *
***
*****
- - -
---------------------------------------
文本显示效果如下:
-
4.7 链接
Markdown 支持两种形式的链接语法: 行内式和参考式两种形式。
不管是哪一种,链接文字都是用 [方括号] 来标记。
-
超链接
内联方式:This is an [example link](http://example.com/).
引用方式:
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"
-
图片链接
图片的处理方式和链接的处理方式,非常的类似,使用![]()
符号内联方式:
![alt text]\(/path/to/img.jpg "Title") 注:书写时去除'![]\()'中间的转义符号'\'
引用方式:
![alt text][id] [id]: /path/to/img.jpg "Title"
-
其它链接
Markdown 支持比较简短的自动链接形式来处理网址和电子邮件信箱,只要是用方括号包起来, Markdown 就会自动把它转成链接,链接的文字就和链接位置一样,例如:<http://example.com/>
-
4.8 表格
相关代码:
|项A | 项B | 项C | | ------------- |:-------------:| -----:| | aaa | aaaa | aaaaa | | aaaaaaaa | aaaaaaaa | aaaa | | aaaaaaaaaaaaa | aaaaaaaaa | a |
文本显示效果如下:
项A 项B 项C aaa aaaa aaaaa aaaaaaaa aaaaaaaa aaaa aaaaaaaaaaaaa aaaaaaaaa a -
4.9 转义字符
Markdown 可以利用反斜杠来插入一些在语法中有其它意义的符号。
Markdown 支持在下面这些符号前面加上反斜杠来帮助插入普通的符号:
\ 反斜杠
` 反引号
* 星号
_ 底线
{} 大括号
[] 方括号
() 括号
# 井字号
+ 加号
- 减号
. 英文句点
! 惊叹号
5. 参考文档
- Markdown 语法说明 (简体中文版)
- Markdown语法说明(详解版)
- 献给写作者的 Markdown 新手指南
- 鲁塔弗的博客
- Markdown 11种基本语法
- Markdown 语法
- 开始使用 Markdown
- Markdown
6. 其他
- Markdown与html是可以嵌套的。Markdown内部可以嵌套大部分html代码(有少数不支持);html中则不能嵌套Markdown标记语言,不支持。
7. 修订补充
-
2018/03/20 插入图片(图片编码方法)
本节引用链接地址:MarkDown添加图片的三种方式
1. 把图片存入markdown文件
用base64转码工具把图片转成一段字符串,然后把字符串填到基础格式中链接的那个位置。
-
基础用法:
![avatar]\(data:image/png;base64,iVBORw0......) 注:书写时去除'![]\()'中间的转义符号'\'
这个时候会发现插入的这一长串字符串会把整个文章分割开,非常影响编写文章时的体验。如果能够把大段的base64字符串放在文章末尾,然后在文章中通过一个id来调用,文章就不会被分割的这么乱了。
-
高级用法:
![avatar][base64str] [base64str]:data:image/png;base64,iVBORw0......
2. base64的图片编码如何得来?
-
使用python将图片转化为base64字符串
import base64 f=open('723.png','rb') #二进制方式打开图文件 ls_f=base64.b64encode(f.read()) #读取文件内容,转换为base64编码 f.close() print(ls_f)
-
base64字符串转化为图片
import base64 bs='iVBORw0KGgoAAAANSUhEUg....' # 太长了省略 imgdata=base64.b64decode(bs) file=open('2.jpg','wb') file.write(imgdata) file.close()
-
2018/03/20 简书Markdown编辑器下插入图片
本节引用链接地址:如何插入图片
简书Markdown非常方便地支持拖动图片上传,将图片拖动入输入框即可。
如果你需要添加的是本地图片,可以直接拖动一张或多张(200张以内)到编辑器内,图片会自动上传。
如果你需要添加的是截图,你可以使用 QQ 等软件的自带截图功能截图之后,在编辑器内按「ctrl + V」组合键粘贴,即可自动上传截图。
-
2018/05/03 代码引用
示例代码编辑如下:
``` bash
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
# run unit tests
npm run unit
```
显示效果为:
# build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report # run unit tests npm run unit
---end