前言
Markdown是一种轻量级的标记语言,把作者从繁杂的排版工作中解放出来,实现易读易写的文章写作,已经逐渐成为事实上的行业标准。CSDN博客支持Markdown可以让广大博友更加专注于博客内容,大赞。但是,不少博友可能对Markdown比较生疏,本博接下来用一个系列文章《Markdown简明教程》扼要介绍Markdown,希望可以对大家有所帮助。
关于Markdown
简明教程1-关于Markdown
啥是Markdown
Markdown的目标是实现易读易写,成为一种适用于网络的书写语言。
我们写作文章时经常会遇到一些困扰。试想一下,您在使用Word写作文档,您经常需要暂停写作,选中某个部分,然后利用排版工具为该部分添加排版格式,然后才能继续您的写作;如果你要写网络文档,情况可能更糟,如果需要呈现一个列表,您需要使用
为啥Markdown
接下来,我们通过Markdown的优缺点,看看为啥Markdown。
Markdown优点
专注内容 使作者可以更加关注文章内容、更加关注写作本身。
易学易写易读 语法简单,容易学习。操作简单,容易书写。格式简洁大方,可读性强。
兼容性强 纯文本内容,兼容几乎所有的文本编辑器和html编辑器。
格式转换方便 可以轻松导出为HTML格式、PDF格式、MD格式,便于实现文章内容的存储和传播,例如将博客转存为电子书,例如将博客发布到hexo博客系统等。
功能强大 兼容html语法、特殊字符自动转换、轻松绘制表格、公式、流程图等。
Markdown的缺点
格式难于自定义 因为Markdown更加关注内容、更加关注写作本身,因此Markdown在格式自定义方面有所欠缺,例如Markdown默认链接在新页面打开,更改起来比较麻烦,需要编写额外代码实现功能。
需要额外编译器 浏览器不会默认编译Markdown,需要额外的编译器进行编译。
尽管有一些缺点,Markdown的强大之处更加诱人,别犹豫别徘徊,值得一试。请大家摩摩拳擦擦掌,开启您的Markdown之路吧。
学习资源
创始人John Gruber的Markdown语法说明
Markdown中文版语法说明
Github help
Markdown tw
Markdown Tutorial,一个学习测试平台
Learning Markdown
markable-同步编译成html源码或网页
Markdown Syntax Cheat Sheet
stackedit
Markdown基本使用
简明教程2-Markdown基本使用
本文为《Markdown简明教程》系列教程的第2篇Markdown基本使用,学习Markdown的基本语法,了解格式化文本,格式化代码、列表、图片、链接、转义符等,下一篇文章我们来研读Markdown的扩展使用。
2.基本语法
2.1文本格式化
2.1.1 强调文字
我们使用斜体文字的方式倾斜文字,加粗的文字的方式加粗文字,使用加粗的斜体字同时加粗和倾斜文字。
下面的Markdown代码:
斜体文字
加粗文字
加粗的斜体文字
将会编译成html:
斜体文字
加粗文字
加粗的斜体文字
显示在网页上的结果为: 斜体文字 加粗文字 加粗的斜体文字
2.1.2 添加删除线
我们可以使用markdown给文字添加删除线:
添加删除线的文字
编译成html之后:
添加删除线的文字
显示在网页上结果为: 添加删除线的文字
2.1.3 标题
Markdown 支持两种标题的语法,类 Setext 和类 atx 形式。
类Setext形式采用底线的形式.
类Atx形式则是在行首插入1到6个#,对应到标题1到标题6.
解析成html:
显示在网页上结果为: 标题结果
2.1.4 引用
Markdown通过在引用的文字之前添加”>”标记达到引用的效果,引用段落的时候可以偷懒只在整个段落的第一行最前面加上 >。引用里面可以使用强调、链接等其他语法。
这里是一段引用
也可以偷懒只在首行引用一个段落引用段落:Markdown是一种轻量级的标记语言,把作者从繁杂的排版工作中解放出
来,实现易读易写的文章写作,已经逐渐成为事实上的行业标准。结束引用,用个空行
编译成html之后:
这里是一段引用 也可以偷懒只在首行引用一个段落
引用段落:Markdown是一种轻量级的标记语言,把作者从繁杂的排版工作中解放出来,实现易读易写的文章写作,已经逐渐成为事实上的行业标准。
结束引用,用个空行
显示在网页上结果为:
这里是一段引用 也可以偷懒只在首行引用一个段落
引用段落:Markdown是一种轻量级的标记语言,把作者从繁杂的排版工作中解放出来,实现易读易写的文章写作,已经逐渐成为事实上的行业标准。
结束引用,用个空行
引用可以嵌套,使用不同数量的“>”表示层次。
这里是个引用
嵌套引用
这里是个引用
编译成html之后:
这里是个引用
嵌套引用
这里是个引用
显示在网页上结果为:
这里是个引用
嵌套引用
这里是个引用
2.2 代码格式化
2.2.1 行内代码
使用反引号”`”包含实现行内代码。
我们可以使用
换行,也可以使用实现。
高亮
文字
编译成html之后:
我们可以使用
换行,也可以使用实现。
高亮
文字。
显示在网页上结果为: 我们可以使用
换行,也可以使用
2.2.1 区块代码
如果需要在代码内插入反引号,需要多个反引号开始和结束一段代码。 如果需要代码块和语法高亮,可以采用三个反引号的方式,同时可以注明语言类型。
“`ruby
require ‘redcarpet’
markdown = Redcarpet.new(“Hello World!”)
puts markdown.to_html
无序列表使用星号、加号或是减号作为列表标记,如果不按列表显示,前面记得加一空行。
“`markdown
- Red
- Green
- Blue
解析为
显示在网页上结果为:
Red
Green
Blue
2.3.2 有序列表
使用数字接着一个英文句点表示一个有序列表, 注意前面的数字对列表没有影响。
显示在网页结果为:
文字
图片
表格
2.3.3 列表嵌套
列表可以嵌套,添加tab缩进表示层次。例如下面的Markdown代码:
显示在网页上结果为:
文字
强调
粗体
斜体
粗体和斜体
引用
图片
表格
2.3.4 多段列表
列表项里可以包含多个段落,每个项目下的段落都必须缩进 4 个空格或是 1 个制表符:
学习Markdown 学习Markdown的网站,我们可以参考文章结尾的学习资源,文档、案例、教程。 学习起来很简单。
使用Markdown 可以使用客户端和在线编辑器。
2.4 链接
Markdown 支持两种形式的链接语法: 行内式和参考式两种形式。
2.4.1 行内式链接
首先来看行内式,只要在方块括号后面紧接着圆括号并插入网址链接即可,如果你还想要加上链接的 title 文字,只要在网址后面,用双引号把 title 文字包起来即可。
欢迎大家访问我的博客。
也可以不指定链接的title。
解析成html:
欢迎大家访问我的博客。
也可以不指定链接的title。
显示在网页上,结果为:
欢迎大家访问我的博客。 也可以不指定链接的title。
2.4.2 参考式链接
参考式链接需要进行链接内容定义,然后引用该定义设置链接。 链接内容定义格式为:
[链接名]: 空格(或tab) 链接地址 空格 “链接地址”(/whqet/csdn_markdown_tutorial/blob/master/可省略)
设置链接的格式为
[链接文字][链接名称]
如下面代码所说:
请大家访问我的[博客][blog],获取更多信息。
解析成html为:
请大家访问我的博客,获取更多信息。
显示在网页上结果为: 请大家访问我的博客,获取更多信息。
2.4.3 页内导航
我们同样可以使用markdown实现页内导航,步骤如下:
先定义一个锚记
2.5 图片
Markdown 使用一种和链接很相似的语法来标记图片,同样也允许两种样式: 行内式和参考式。 行内式图片如下所示:
参考式图片如下所示:
![Alt text][id]
到目前为止, Markdown 还没有办法指定图片的宽高,如果你需要的话,你可以使用普通的 标签。 注意:CSDN图片如果大于显示区域,则图片宽度自适应,如果图片较小则以原始尺寸显示。 宽度自适应 原始尺寸显示
2.6 分割线
你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线,行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线:
2.7 转义
Markdown 可以利用反斜杠来实现转义, 支持以下这些符号前面加上反斜杠来帮助插入普通的符号:
\ 反斜线
` 反引号
* 星号
_ 底线
{} 花括号
[] 方括号
() 括弧
本文为《Markdown简明教程》系列教程的第3篇Markdown表格和公式,主要讲解Markdown实现表格、公式。下一篇文章我们来研读Markdown UML图。
Markdown使用管线图的方式实现表格,表格里面可以使用强调、链接等行内格式。 下面代码所示为一个基本的表格:
教程标题 | 主要内容 |
---|---|
关于Markdown | 简介Markdown,Markdown的优缺点 |
Markdown基础 | Markdown的基本语法,格式化文本、代码、列表、链接和图片、分割线、转义符等 |
Markdown表格和公式 | Markdown的扩展语法,表格、公式 |
解析html如下:
教程标题 | 主要内容 |
---|---|
关于Markdown | 简介Markdown,Markdown的优缺点 |
Markdown基础 | Markdown的基本语法,格式化文本、代码、列表、链接和图片、分割线、转义符等 |
Markdown扩展 | Markdown的扩展语法,表格、公式、UML图 |
在网页中结果如下: 教程标题| 主要内容 ——-|———- 关于Markdown | 简介Markdown,Markdown的优缺点 Markdown基础 | Markdown的基本语法,格式化文本、代码、列表、链接和图片、分割线、转义符等 Markdown表格和公式 | Markdown的扩展语法,表格、公式
注意,为了美观起见,可以把前后端管线补齐,如下面代码所示。
教程标题 | 主要内容 |
---|---|
关于Markdown | 简介Markdown,Markdown的优缺点 |
Markdown基础 | Markdown的基本语法,格式化文本、代码、列表、链接和图片、分割线、转义符等 |
Markdown扩展 | Markdown的扩展语法,表格、公式、UML图 |
注意,表头下面的虚线为了更好的分隔表头和表格内容,长度随意。
2.2 表格对齐方式
注意,我们同时可以指定表格单元格的对齐方式,如下面代码所示。
Day | Meal | Price |
---|---|---|
Monday | pasta | $6 |
Tuesday | chicken | $8 |
显示在网页上结果为: | Day | Meal | Price | |:——–|——— |:——-:| | Monday | pasta | 6||Tuesday|chicken| 8 | 注意,表格列的宽度设置不能设置。Markdown更加关注内容,因此格式设置性能较弱,如果确实需要设置,请使用CSS。
CSDN已经内置了这个插件,我们就不需要手动插入了,可以直接写数学公式了。
3.1 行内公式
我们使用 ... 的方式来包含行内公式,例如
一个简单的数学公式,求圆的面积 S=πr2 。
编译之后表现在网页上,结果为: 一个简单的数学公式,求圆的面积 S=πr2 。
3.2 陈列公式(displayed formulas)
陈列公式使用
如果使用陈列公式,结果为:
一个简单的数学公式,求圆的面积。
3.3 MathJax语法
使用\alpha、\beta、\gamma表示希腊字母α、β、γ, 使用\Gamma表示大写希腊字母Γ等,如下表所示。
字母 实现 字母 实现
A A α \alhpa
B B β \beta
Γ \Gamma γ \gamma
Δ \Delta δ \delta
E E ϵ \epsilon
Z Z ζ \zeta
H H η \eta
Θ \Theta θ \theta
I I ι \iota
K K κ \kappa
Λ \Lambda λ \lambda
M M μ \mu
N N ν \nu
Ξ \Xi ξ \xi
O O ο \omicron
Π \Pi π \pi
P P ρ \rho
Σ \Sigma σ \sigma
T T τ \tau
Υ \Upsilon υ \upsilon
Φ \Phi ϕ \phi
X X χ \chi
Ψ \Psi ψ \psi
Ω \v ω \omega
使用^和_实现上标和下标,例如 x2i 实现 xi2 。
利用{}实现优先级。 例如 x2i 实现 xi2 ,而$ x_{i2} $实现$x_{i^2}$。 例如$ \lim_{x\to\infty} $实现
limx→∞ 。
常用数学运算符表示如下。
数学运算符 实现
x+y x+y
x−y x−y
x×y x×y
x÷y x÷y
x2 x2
x√ x√
x±y x±y
x≈y x≈y
x≡y x≡y
xy xy
x∪y x∪y
x∩y x∩y
x∈y x∈y
log(x) log(x)
sin(x) sin(x)
x¯ x¯
(xy) (xy)
∂x∂y ∂x∂y
limx→∞ limx→∞
limx→∞ limx→∞
∑1n ∑n1
∑i=0∞i2 ∑∞i=0i2
给个小作业:
本文为《Markdown简明教程》系列教程的第3篇Markdown表格和公式,主要讲解Markdown实现表格、公式。下一篇文章我们来研读Markdown UML图。
本文为《Markdown简明教程》系列教程的第4篇Markdown UML图,主要讲解Markdown序列图、流程图等, 顺便为介绍了无需任何插件的在线绘制UML的Gravizo。
基于js-sequence-diagrams实现了序列图,使用下列的格式声明一个序列图: 序列图 在网页上解析结果为:
DHCP客户机–>DHCP服务器: IP租约请求
DHCP服务器–>DHCP客户机: IP租约提供
DHCP客户机–>DHCP服务器: IP租约选择
DHCP服务器–>DHCP客户机: IP租约确认
注意:所有的序列图代码需要放在一个语法类型为sequence的代码块中。如下面代码所示。 序列图代码样例
2.2 序列图语法
序列图的语法如下图所示。 序列图语法 具体来说:
设置title,采用title: message。 markdown title: 序列图标题 将编译为: sequence title: 序列图标题
设置participant,采用participant: actor markdown participant A participant B 将编译为: sequence participant A participant B
设置note,
左侧note: note left of acotor: message
右侧note: note right of actor: message,
覆盖note: note over actor:message markdown note left of A: 左侧note note right of B: 右侧note note over C: 覆盖note note over A,B: 覆盖多个actor note over B,C: 测试下\n 换 将编译为: sequence note left of A: 左侧note note right of B: 右侧note note over C: 覆盖note note over A,B: 覆盖多个actor note over B,C: 测试下\n 换行
设置会话,
实线实箭头: actor->actor: message
虚线实箭头: actor–>actor:message
实线虚箭头: actor->>actor:message
虚线虚箭头: actor–>>actor:message markdown A->A:自言自语 A->B:实线实箭头 A–>B:虚线实箭头 A->>B:实线虚箭头 A–>>B:虚线虚箭头 将编译为: sequence A->A:自言自语 A->B:实线实箭头 A–>B:虚线实箭头 A->>B:实线虚箭头 A–>>B:虚线虚箭头 下面的案例演示了序列图语法的混合使用,参见代码: 序列图设置 在网页上解析之后结果为: sequence Title: 作业通知提交序列图 教师–>班长: 通知明天作业 note left of 教师: 通知 班长–>同学们: 记得明天交作业 同学们->>班长: 了解 同学们–>教师: 交作业 note right of 同学们: 作业
3. 流程图
3.1 流程图示例
CSDN Markdown基于flowchart.js实现流程图。一个简单的流程格式如下代码所示: 这里写图片描述 编译之后结果为:
st=>start: Start
e=>end
op=>operation: My Operation
cond=>condition: Yes or No?
st->op->cond
cond(yes)->e
cond(no)->op
注意:所有的流程图代码需要放在一个语法类型为flow的代码块中。如下面代码所示。 这里写图片描述
3.2 流程图语法
流程图绘制包括两部分:节点定义和节点连接。
格式如下:
节点名称=>节点类型: 提示文本
节点名称可随意起,甚至支持中文。提示文本可以为英文,可以为中文,也可以为空使用默认值。例如: markdown st=>start: start or kaishi=>start: 开始 or 起点=>start: 起点 or start=>start
节点类型有start、operation、condition、end等,如下图所示。 markdown start=>start: 开始 login=>operation: 登陆 isLogin=>condition: 是否已登陆? test=>operation: 进行测试 end=>end: 结束 #### 2. 节点连接
格式如下
一般节点连接:
节点->节点
条件判断节点连接:
条件节点(yes)->正确应答节点
条件节点(no)->错误应答节点
如下面代码所示:
start->isLogin
isLogin(yes)->test
isLogin(no)->login->test
test->end
编译之后结果为
start=>start: 开始
login=>operation: 登陆
isLogin=>condition: 是否已登陆?
test=>operation: 进行测试
end=>end: 结束
start->isLogin
isLogin(yes)->test
isLogin(no)->login->test
test->end
接下来做一个复杂的案例,如下图所示,请大家思考如何实现。
start=>start: 开始
isLogin=>condition: 是否已登录?
login=>operation: 登陆
selectPic=>operation: 选择一张图片
isPic=>condition: 格式是否正确?
doIt=>operation: 完成资料
isRight=>condition: 资料是否符合要求?
end=>end: 完成
start->isLogin
isLogin(yes)->selectPic
isLogin(no)->login->selectPic
selectPic->isPic
isPic(yes)->doIt->isRight
isPic(no)->selectPic
isRight(yes)->end
isRight(no)->doIt
列出源代码供大家参考。
start=>start: 开始
isLogin=>condition: 是否已登录?
login=>operation: 登陆
selectPic=>operation: 选择一张图片
isPic=>condition: 格式是否正确?
doIt=>operation: 完成资料
isRight=>condition: 资料是否符合要求?
end=>end: 完成
start->isLogin
isLogin(yes)->selectPic
isLogin(no)->login->selectPic
selectPic->isPic
isPic(yes)->doIt->isRight
isPic(no)->selectPic
isRight(yes)->end
isRight(no)->doIt
4. Gravizo
在研究Markdown UML图的时候,找到了不少在线绘制UML图的方式,例如Dot、PlantUML和UMLGraph等方式,并且发现了一个不用使用任何插件就可调用图片的方式-Gravizo。
例如,我们可以使用PlantUML的方式绘制一个用例图,代码如下。 用例图。
@startuml
left to right direction
skinparam packageStyle rect
actor customer
actor clerk
rectangle checkout {
customer – (checkout)
(checkout) .> (payment) : include
(help) .> (checkout) : extends
(checkout) – clerk
}
@enduml
然后,我们就可以使用下面代码调用该图片:
http://g.gravizo.com/g?
@startuml
left to right direction;
skinparam packageStyle rect;
actor customer;
actor clerk;
rectangle checkout {
customer – (checkout);
(checkout) .> (payment) : include;
(help) .> (checkout) : extends;
(checkout) – clerk;
}
@enduml
‘>
CSDN Markdown快速上手
Markdown简明教程5-CSDN Markdown快速上手 本文为《Markdown简明教程》系列教程的第5篇CSDN Markdown快速上手,主要讲解CSDN Markdown的特点、快速上手、个性定制文章模板等。
实时预览
同步滚动
LaTex数学公式、UML序列图和流程图
导入导出MD文件
支持离线写作
几乎全程的键盘操作
3. CSDN Markdown快速上手
3.1 使用快捷键
CSDN Markdown的使用原则是尽量不让格式操作影响文章写作,让我们更加专注与行文思路、文章内容。所以,尽管CSDN Markdown内置了比较丰富的工具栏,但是建议大家行文过程中,尽量少用工具栏,少用鼠标,尽量使用手写语法格式,可以适度使用快捷键。
我们先来看看CSDN Markdown内置的快捷键:
加粗 Ctrl + B
斜体 Ctrl + I
引用 Ctrl + Q
插入链接 Ctrl + L
插入代码 Ctrl + K
插入图片 Ctrl + G
提升标题 Ctrl + H
有序列表 Ctrl + O
无序列表 Ctrl + U
横线 Ctrl + R
撤销 Ctrl + Z
重做 Ctrl + Y
接下来,我们从实战的角度介绍这些快捷键的使用,可能个人喜好的成分较大,不喜勿喷。
粗体斜体
粗体斜体快捷键
引用
引用尽量不用快捷键
链接
插入链接 参考式链接
高亮代码块
插入代码块
图片
图片输入最好使用快捷键ctrl+g,会跳出插入图片对话框,我们可以选择插入在线图片或上传图片。 插入在线图片
标题
标题输入尽量不用快捷键,使用#语法格式。
列表
输入列表、切换列表尽量使用快捷键,如下图所示 输入列表、切换列表类型
分割线
分割线直接输入,不建议使用快捷键。
撤销、重复
撤销 Ctrl + Z,重做 Ctrl + Y,不错的功能,强烈建议使用。
3.2 使用离线写作
大家可以直接使用CSDN Markdown实现离线写作,浏览器会自动存储大家的写作进度,也可以使用其他Markdown编辑工具(例如window平台下的markdown pad、mac平台下Mou等)写作完毕,再导入到CSDN Markdown里。
使用CSDN Markdown的好处在于,可以一步到位地编辑文章,包括图片的上传和部署,文章摘要、文章参数的设置。
使用客户端编辑工具的好处在于, 文章写作操作的稳定性。
3.3 使用导入导出
CSDN Markdown内置了导入导出功能,这个功能非常有用,如下所示。
实现不同平台间共享文件,例如不少博友同步更新自己的独立博客,我的独立博客。
收集整理文章形成电子书,gitbook就是一个不错的方案。
博文与PPT之间的相互转换,可参考这里。
3.4 个性定制文章模板
在博文写作过程中,每种类型的文章都有一些通用的格式,例如版权声明标识、例如原创翻译文章的“译者说”等。如果可以个性定制文章模板,需要的时候调用将能极大地提高工作效率,接下来大家介绍下我的做法。
我们可以利用CSDN Markdown编辑器创建文章模板,然后利用“导出到本地”功能将模板存到本地(或网络地址),需要该模板时使用“从本机导入”(或“从线上导入”)即可。
本系列文章的通用部分即用这种方式完成。