转载自:http://blog.csdn.net/whqet,我在这里汇总一下
--------------------------------------------------------------------------------------------1----------------------------------------------------------------------------------------------------
前言 啥是Markdown 为啥Markdown Markdown优点 Markdown的缺点 学习资源 声明
Markdown是一种轻量级的标记语言,把作者从繁杂的排版工作中解放出来,实现易读易写的文章写作,已经逐渐成为事实上的行业标准。博客支持Markdown可以让广大博友更加专注于博客内容,大赞。但是,不少博友可能对Markdown比较生疏,本博接下来用一个系列文章《Markdown简明教程》扼要介绍Markdown,希望可以对大家有所帮助。
系列教程目录
关于Markdown Markdown基本使用 Markdown表格和公式 Markdown UML绘图 Markdown快速上手 Markdown 参考手册Markdown的目标是实现易读易写,成为一种适用于网络的书写语言。 我们写作文章时经常会遇到一些困扰。试想一下,您在使用Word写作文档,您经常需要暂停写作,选中某个部分,然后利用排版工具为该部分添加排版格式,然后才能继续您的写作;如果你要写网络文档,情况可能更糟,如果需要呈现一个列表,您需要使用<ul><li>等若干多的标签实现;我们的写作思路经常会被各种各样的排版操作而打断,使我们不能专注于写作。 Markdown正是为此而生,用简洁的语法代替排版,把作者从繁杂的排版操作中解放出来,更加专注于写作内容, 内容、格式、插图、代码、甚至公式、流程图等,只需要使用键盘即可完成,轻松完成文章写作。 Markdown 是一种用来写作的轻量级「标记语言」, 可以轻松转换成html格式、pdf格式,HTML是一种网络文章的发布规范,而Markdown是一种网络文章写作规范。Github、Wordpress、、简书等行业知名网站均支持Markdown,Markdown已逐渐成为事实上的网络写作规范。
接下来,我们通过Markdown的优缺点,看看为啥Markdown。
尽管有一些缺点,Markdown的强大之处更加诱人,别犹豫别徘徊,值得一试。请大家摩摩拳擦擦掌,开启您的Markdown之路吧。
本文为《Markdown简明教程》系列教程的第1篇关于Markdown,下一篇文章我们来研读Markdown的基本使用,主要语法。
前端开发whqet,关注前端开发,分享相关资源。csdn专家博客,王海庆希望能对您有所帮助,限于作者水平有限,出错难免,欢迎拍砖! 欢迎任何形式的转载,烦请注明装载,保留本段文字。 本文原文链接,http://blog.csdn.net/whqet/article/details/44274215 欢迎大家访问独立博客http://whqet.github.io
--------------------------------------------------------------------------------------------2----------------------------------------------------------------------------------------------------
前言 基本语法 1文本格式化 11 强调文字 12 添加删除线 13 标题 14 引用 2 代码格式化 21 行内代码 21 区块代码 3 列表 31 无序列表 32 有序列表 33 列表嵌套 34 多段列表 4 链接 41 行内式链接 42 参考式链接 43 页内导航 5 图片 6 分割线 7 转义 动手实践 声明
Markdown是一种轻量级的标记语言,把作者从繁杂的排版工作中解放出来,实现易读易写的文章写作,已经逐渐成为事实上的行业标准。博客支持Markdown可以让广大博友更加专注于博客内容,大赞。但是,不少博友可能对Markdown比较生疏,本博接下来用一个系列文章《Markdown简明教程》扼要介绍Markdown,希望可以对大家有所帮助。
系列教程目录
关于Markdown Markdown基本使用 Markdown表格和公式 Markdown UML绘图 Markdown快速上手 Markdown 参考手册本文为《Markdown简明教程》系列教程的第2篇Markdown基本使用,学习Markdown的基本语法,了解格式化文本,格式化代码、列表、图片、链接、转义符等,下一篇文章我们来研读Markdown的扩展使用。
我们使用*斜体文字*的方式倾斜文字,**加粗的文字**的方式加粗文字,使用***加粗的斜体字***同时加粗和倾斜文字。
下面的Markdown代码:
*斜体文字* **加粗文字** ***加粗的斜体文字*** 123将会编译成html:
<em>斜体文字</em> <strong>加粗文字</strong> <strong><em>加粗的斜体文字</em></strong> 123显示在网页上的结果为: 斜体文字 加粗文字 加粗的斜体文字
我们可以使用markdown给文字添加删除线:
~~添加删除线的文字~~ 1编译成html之后:
<del>添加删除线的文字</del> 1显示在网页上结果为: 添加删除线的文字
Markdown 支持两种标题的语法,类 Setext 和类 atx 形式。
类Setext形式采用底线的形式. 一号标题 ============= 二号标题 ------------- 类Atx形式则是在行首插入1到6个#,对应到标题1到标题6. # 一号标题 ## 二号标题 ### 三号标题 #### 四号标题 ##### 五号标题 ###### 六号标题 123456789101112解析成html:
<h1>一号标题</h1> <h2>二号标题</h2> <h3>三号标题</h3> <h4>四号标题</h4> <h5>五号标题</h5> <h6>六号标题</h6> 123456显示在网页上结果为:
Markdown通过在引用的文字之前添加”>”标记达到引用的效果,引用段落的时候可以偷懒只在整个段落的第一行最前面加上 >。引用里面可以使用强调、链接等其他语法。
> 这里是一段引用 > 也可以偷懒只在首行引用一个段落 > 引用段落:Markdown是一种轻量级的标记语言,把作者从繁杂的排版工作中解放出 来,实现**易读易写**的文章写作,已经逐渐成为事实上的行业标准。 >**结束引用,用个空行** 1234567编译成html之后:
<blockquote> <p>这里是一段引用 也可以偷懒只在首行引用一个段落</p> <p>引用段落:Markdown是一种轻量级的标记语言,把作者从繁杂的排版工作中解放出来,实现<strong>易读易写</strong>的文章写作,已经逐渐成为事实上的行业标准。</p> <strong>结束引用,用个空行</strong> </blockquote> 123456显示在网页上结果为:
这里是一段引用 也可以偷懒只在首行引用一个段落
引用段落:Markdown是一种轻量级的标记语言,把作者从繁杂的排版工作中解放出来,实现易读易写的文章写作,已经逐渐成为事实上的行业标准。
结束引用,用个空行
引用可以嵌套,使用不同数量的“>”表示层次。
> 这里是个引用 > > 嵌套引用 > > 这里是个引用 1234编译成html之后:
<blockquote> <p>这里是个引用</p> <blockquote> <p>嵌套引用</p> </blockquote> <p>这里是个引用</p> </blockquote> 1234567显示在网页上结果为:
这里是个引用
嵌套引用
这里是个引用
使用反引号”`”包含实现行内代码。
我们可以使用`<br>`换行,也可以使用`<p></p>`实现。 `高亮`文字 12编译成html之后:
我们可以使用<code><br></code>换行,也可以使用<code><p></p></code>实现。 <code>高亮</code>文字。 12显示在网页上结果为: 我们可以使用<br>换行,也可以使用<p></p>实现。 高亮文字
如果需要在代码内插入反引号,需要多个反引号开始和结束一段代码。 如果需要代码块和语法高亮,可以采用三个反引号的方式,同时可以注明语言类型。
```ruby require 'redcarpet' markdown = Redcarpet.new("Hello World!") puts markdown.to_html ``` 12345无序列表使用星号、加号或是减号作为列表标记,如果不按列表显示,前面记得加一空行。
- Red - Green - Blue 123解析为
<ul> <li>Red</li> <li>Green</li> <li>Blue</li> </ul> 12345显示在网页上结果为:
Red Green Blue使用数字接着一个英文句点表示一个有序列表, 注意前面的数字对列表没有影响。
1. 文字 2. 图片 4. 表格 123解析成html:
<ol> <li>文字</li> <li>图片</li> <li>表格</li> </ol> 12345显示在网页结果为:
文字 图片 表格列表可以嵌套,添加tab缩进表示层次。例如下面的Markdown代码:
1. 文字 1. 强调 - 粗体 - 斜体 - 粗体和斜体 2. 引用 2. 图片 3. 表格 12345678转换成html为:
<ol> <li>文字 <ol> <li>强调 <ul> <li>粗体</li> <li>斜体</li> <li>粗体和斜体</li> </ul> </li> <li>引用</li> </ol> </li> <li>图片</li> <li>表格</li> </ol> 12345678910111213141516显示在网页上结果为:
文字 强调 粗体 斜体 粗体和斜体 引用 图片 表格列表项里可以包含多个段落,每个项目下的段落都必须缩进 4 个空格或是 1 个制表符:
1. 学习Markdown 学习Markdown的网站,我们可以参考文章结尾的学习资源,文档、案例、教程。 学习起来很简单。 2. 使用Markdown 可以使用客户端和在线编辑器。 12345在网页上显示结果为:
学习Markdown 学习Markdown的网站,我们可以参考文章结尾的学习资源,文档、案例、教程。 学习起来很简单。 使用Markdown 可以使用客户端和在线编辑器。Markdown 支持两种形式的链接语法: 行内式和参考式两种形式。
首先来看行内式,只要在方块括号后面紧接着圆括号并插入网址链接即可,如果你还想要加上链接的 title 文字,只要在网址后面,用双引号把 title 文字包起来即可。
欢迎大家访问我的[博客](http://blog.csdn.net/whqet/ "博客")。 也可以不指定[链接](http://blog.csdn.net)的title。 12解析成html:
欢迎大家访问我的<a href="http://blog.csdn.net/whqet/" title="博客">博客</a>。 也可以不指定<a href="http://blog.csdn.net">链接</a>的title。 12显示在网页上,结果为:
欢迎大家访问我的博客。 也可以不指定链接的title。
参考式链接需要进行链接内容定义,然后引用该定义设置链接。 链接内容定义格式为:
[链接名]: 链接地址 "链接title" [链接名]: 空格(或tab) 链接地址 空格 "链接地址"(可省略) 12设置链接的格式为
[链接文字][链接名称] 1如下面代码所说:
请大家访问我的[博客][blog],获取更多信息。 [blog]: http://blog.csdn.net/whqet "我的博客" 12解析成html为:
请大家访问我的<a href="http://blog.csdn.net/whqet" title="我的博客">博客</a>,获取更多信息。 1显示在网页上结果为: 请大家访问我的博客,获取更多信息。
我们同样可以使用markdown实现页内导航,步骤如下:
先定义一个锚记 <div id="footer"></div> 然后设置页内链接 [到底部](#footer) 我们可以类似的方式去实现文章的页内导航。单击下面的链接跳转到2.4链接。跳到链接开始位置
Markdown 使用一种和链接很相似的语法来标记图片,同样也允许两种样式: 行内式和参考式。 行内式图片如下所示:
  12参考式图片如下所示:
![Alt text][id] [id]: url/to/image "Optional title attribute" 12到目前为止, Markdown 还没有办法指定图片的宽高,如果你需要的话,你可以使用普通的 标签。 注意:图片如果大于显示区域,则图片宽度自适应,如果图片较小则以原始尺寸显示。
你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线,行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线:
* * * *** ***** - - - --------------------------------------- 1234567Markdown 可以利用反斜杠来实现转义, 支持以下这些符号前面加上反斜杠来帮助插入普通的符号:
\ 反斜线 ` 反引号 * 星号 _ 底线 {} 花括号 [] 方括号 () 括弧 # 井字号 + 加号 - 减号 . 英文句点 ! 惊叹号 123456789101112本文为《Markdown简明教程》系列教程的第2篇Markdown基本使用,学习Markdown的基本语法,下一篇文章我们来研读Markdown的扩展使用。
前端开发whqet,关注前端开发,分享相关资源。csdn专家博客,王海庆希望能对您有所帮助,限于作者水平有限,出错难免,欢迎拍砖! 欢迎任何形式的转载,烦请注明装载,保留本段文字。 本文原文链接,http://blog.csdn.net/whqet/article/details/44274999 欢迎大家访问独立博客http://whqet.github.io
--------------------------------------------------------------------------------------------3---------------------------------------------------------------------------------------------------
目录 前言 表格 1 表格 2 表格对齐方式 公式 1 行内公式 2 陈列公式displayed formulas 3 MathJax语法 深入 声明
Markdown是一种轻量级的标记语言,把作者从繁杂的排版工作中解放出来,实现易读易写的文章写作,已经逐渐成为事实上的行业标准。博客支持Markdown可以让广大博友更加专注于博客内容,大赞。但是,不少博友可能对Markdown比较生疏,本博接下来用一个系列文章《Markdown简明教程》扼要介绍Markdown,希望可以对大家有所帮助。
系列教程目录
关于Markdown Markdown基本使用 Markdown表格和公式 Markdown UML图 Markdown快速上手 Markdown 参考手册本文为《Markdown简明教程》系列教程的第3篇Markdown表格和公式,主要讲解Markdown实现表格、公式。下一篇文章我们来研读Markdown UML图。
Markdown使用管线图的方式实现表格,表格里面可以使用强调、链接等行内格式。 下面代码所示为一个基本的表格:
教程标题| 主要内容 -------|---------- 关于Markdown | 简介Markdown,Markdown的优缺点 Markdown基础 | Markdown的**基本语法**,格式化文本、代码、列表、链接和图片、分割线、转义符等 Markdown表格和公式 | Markdown的**扩展语法**,表格、公式 12345解析html如下:
<table> <thead> <tr> <th>教程标题</th> <th>主要内容</th> </tr> </thead> <tbody> <tr> <td>关于Markdown</td> <td>简介Markdown,Markdown的优缺点</td> </tr> <tr> <td>Markdown基础</td> <td>Markdown的<strong>基本语法</strong>,格式化文本、代码、列表、链接和图片、分割线、转义符等</td> </tr> <tr> <td>Markdown扩展</td> <td>Markdown的<strong>扩展语法</strong>,表格、公式、UML图</td> </tr> </tbody> </table> 12345678910111213141516171819202122在网页中结果如下:
教程标题 主要内容 关于Markdown 简介Markdown,Markdown的优缺点 Markdown基础 Markdown的基本语法,格式化文本、代码、列表、链接和图片、分割线、转义符等 Markdown表格和公式 Markdown的扩展语法,表格、公式注意,为了美观起见,可以把前后端管线补齐,如下面代码所示。
| 教程标题 | 主要内容 | |------------|------------------------------| |关于Markdown | 简介Markdown,Markdown的优缺点| |Markdown基础 | Markdown的**基本语法**,格式化文本、代码、列表、链接和图片、分割线、转义符等| |Markdown扩展 | Markdown的**扩展语法**,表格、公式、UML图| 12345注意,表头下面的虚线为了更好的分隔表头和表格内容,长度随意。
注意,我们同时可以指定表格单元格的对齐方式,如下面代码所示。
| Day | Meal | Price | |:--------|---------:|:-------:| | Monday | pasta | $6 | | Tuesday | chicken | $8 | 1234显示在网页上结果为:
Day Meal Price Monday pasta $6 Tuesday chicken $8注意,表格列的宽度设置不能设置。Markdown更加关注内容,因此格式设置性能较弱,如果确实需要设置,请使用CSS。
通过使用MathJax,我们可以让Markdown解析LaTeX数学表达式,通常情况下,我们需要引入MathJax插件才可能工作。
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script> 1已经内置了这个插件,我们就不需要手动插入了,可以直接写数学公式了。
我们使用$...$的方式来包含行内公式,例如
一个简单的数学公式,求圆的面积$S=\pi r^2$。 1编译之后表现在网页上,结果为: 一个简单的数学公式,求圆的面积 S=πr2 。
陈列公式使用$$...$$来表示,例如。
如果使用陈列公式,结果为: 一个简单的数学公式,求圆的面积。 $$ S=\pi r^2 $$ 12345解析在网页上结果为: 一个简单的数学公式,求圆的面积。
S=πr2
2. 利用{}实现优先级。 例如$ x_i^2 $实现 x2i ,而$ x_{i^2} $实现 xi2 。 例如$ \lim_{x\to\infty} $实现 limx→∞ 。 3. 常用数学运算符表示如下。
运算符 说明 运算符案例 案例实现 + 加 x+y $ x + y $ - 减 x−y $ x - y $ \times 乘 x×y $ x \times y $ \cdot 乘 x⋅y $ x \cdot y $ \ast 乘 x∗y $ x \ast y $ \div 除 x÷y $ x \div y $ \frac 分数 xy $ \frac{x}{y} $ ^ 上标 xy $ x ^ y $ _ 下标 xy $ x _ y $ \sqrt 开二次方 x√ $ \sqrt x $ \sqrt 开方 y4+3y−1−−−−−−−−−√x $ \sqrt[x]{y^4+3y-1} $ \pm 加减 x±y $ x \pm y $ \mp 减加 x∓y $ x \mp y $ = 等于 x=y $ x = y $ \leq 小于等于 x≤y $ x \leq y $ \geq 大于等于 x≥y $ x \geq y $ \ngeq 不大于等于 x≱y $ x \ngeq y $ \not\geq 不大于等于 x≱y $ x \not\geq y $ \neq 不等于 x≠y $ x \neq y $ \approx 约等于 x≈y $ x \approx y $ \equiv 恒等于 x≡y $ x \equiv y $ \bigodot 定义运算符 x⨀y=x+y2 $ x \bigodot y=x+y^2 $ \bigotimes 定义运算符 x⨂y=x+y2 $ x \bigotimes y=x+y^2 $ \in 属于 x∈y $ x \in y $ \notin 不属于 x∉y $ x \notin y $ \subset 子集 x⊂y x⊂y \not\subset 非子集 x⊄y x⊄y \subseteq 子集 x⊆y x⊆y \supset 超集 x⊃y x⊃y \supseteq 超集 x⊇y x⊇y \cup 并 x∪y $ x \cup y $ \cap 交 x∩y $ x \cap y $ \log 对数 log(x) $ \log(x) $ \overline 平均数 x¯ $ \overline{x} $ \overline 连线符号 a+b+c+d¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯ $ \overline{a+b+c+d} $ \underline 下划线 a+b+c+d−−−−−−−−−− $ \underline{a+b+c+d} $ \overbrace 上大括号 a+b+c1.0+d2.0 $\overbrace{a+\underbrace{b+c}_{1.0}+d}^{2.0}$ \underbrace 下大括号 a+d3| $\underbrace{a+d}_3$ \partial 部分 ∂x∂y $ \frac{\partial x}{\partial y} $ \lim 极限 limx→∞ $ \lim_{x\to\infty} $ \displaystyle 块公式格式 limx→∞ $ \displaystyle \lim_{x\to\infty} $ \sum 求和 ∑n1 $ \sum_1^n $ \infty 极限 ∑∞i=0i2 $ \sum_{i=0}^\infty i^2 $ \int 积分 ∫10x2dx $ \int_0^1 x^2 {\rm d}x $ \ldots 底端对齐的省略号 1,2,…,n $ 1,2,\ldots,n $ \cdots 中线对齐的省略号 x21+x22+⋯+x2n x_1^2 + x_2^2 + \cdots + x_n^2 \uparrow 上箭头 ↑ $ \uparrow $ \Uparrow 上箭头 ⇑ $ \Uparrow $给个小作业:
Γ(z)=∫∞0tz−1e−tdt.
本文为《Markdown简明教程》系列教程的第3篇Markdown表格和公式,主要讲解Markdown实现表格、公式。下一篇文章我们来研读Markdown UML图。
前端开发whqet,关注前端开发,分享相关资源。csdn专家博客,王海庆希望能对您有所帮助,限于作者水平有限,出错难免,欢迎拍砖! 欢迎任何形式的转载,烦请注明装载,保留本段文字。 本文原文链接,http://blog.csdn.net/whqet/article/details/44277965 欢迎大家访问独立博客http://whqet.github.io
--------------------------------------------------------------------------------------------4---------------------------------------------------------------------------------------------------
目录 前言 序列图 1 序列图示例 2 序列图语法 流程图 1 流程图示例 2 流程图语法 节点定义 节点连接 Gravizo 声明
Markdown是一种轻量级的标记语言,把作者从繁杂的排版工作中解放出来,实现易读易写的文章写作,已经逐渐成为事实上的行业标准。博客支持Markdown可以让广大博友更加专注于博客内容,大赞。但是,不少博友可能对Markdown比较生疏,本博接下来用一个系列文章《Markdown简明教程》扼要介绍Markdown,希望可以对大家有所帮助。
系列教程目录
关于Markdown Markdown基本使用 Markdown表格和公式 Markdown UML图 Markdown快速上手 Markdown 参考手册本文为《Markdown简明教程》系列教程的第4篇Markdown UML图,主要讲解Markdown序列图、流程图等, 顺便为介绍了无需任何插件的在线绘制UML的Gravizo。
基于js-sequence-diagrams实现了序列图,使用下列的格式声明一个序列图: 在网页上解析结果为:
DHCP客户机DHCP客户机DHCP服务器DHCP服务器IP租约请求IP租约提供IP租约选择IP租约确认注意:所有的序列图代码需要放在一个语法类型为sequence的代码块中。如下面代码所示。
序列图的语法如下图所示。 具体来说:
设置title,采用title: message。 title: 序列图标题 1将编译为:
序列图标题 设置participant,采用participant: actor participant A participant B 12将编译为:
AABB 设置note, 左侧note: note left of acotor: message 右侧note: note right of actor: message, 覆盖note: note over actor:message note left of A: 左侧note note right of B: 右侧note note over C: 覆盖note note over A,B: 覆盖多个actor note over B,C: 测试下\n 换行 12345将编译为:
AABBCC左侧note右侧note覆盖note覆盖多个actor测试下 换行 设置会话, 实线实箭头: actor->actor: message 虚线实箭头: actor–>actor:message 实线虚箭头: actor->>actor:message 虚线虚箭头: actor–>>actor:message A->A:自言自语 A->B:实线实箭头 A-->B:虚线实箭头 A->>B:实线虚箭头 A-->>B:虚线虚箭头 12345将编译为:
AABB自言自语实线实箭头虚线实箭头实线虚箭头虚线虚箭头下面的案例演示了序列图语法的混合使用,参见代码: 在网页上解析之后结果为:
作业通知提交序列图教师教师班长班长同学们同学们通知明天作业通知记得明天交作业了解交作业作业Markdown基于flowchart.js实现流程图。一个简单的流程格式如下代码所示: 编译之后结果为:
StartMy OperationYes or No?Endyesno注意:所有的流程图代码需要放在一个语法类型为flow的代码块中。如下面代码所示。
流程图绘制包括两部分:节点定义和节点连接。
格式如下:
节点名称=>节点类型: 提示文本 1 节点名称可随意起,甚至支持中文。提示文本可以为英文,可以为中文,也可以为空使用默认值。例如: st=>start: start or kaishi=>start: 开始 or 起点=>start: 起点 or start=>start 1234567 节点类型有start、operation、condition、end等,如下图所示。 start=>start: 开始 login=>operation: 登陆 isLogin=>condition: 是否已登陆? test=>operation: 进行测试 end=>end: 结束 12345格式如下
一般节点连接: 节点->节点 条件判断节点连接: 条件节点(yes)->正确应答节点 条件节点(no)->错误应答节点 12345如下面代码所示:
start->isLogin isLogin(yes)->test isLogin(no)->login->test test->end 1234编译之后结果为
开始是否已登陆?进行测试结束登陆yesno接下来做一个复杂的案例,如下图所示,请大家思考如何实现。
开始是否已登录?选择一张图片格式是否正确?完成资料资料是否符合要求?完成登陆yesnoyesnoyesno列出源代码供大家参考。
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 1234567891011121314151617在研究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 123456789101112然后,我们就可以使用下面代码调用该图片:
<img src='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 '> 1234567891011121314本文为《Markdown简明教程》系列教程的第4篇Markdown UML图,主要讲解Markdown序列图、流程图等, 顺便为介绍了无需任何插件的在线绘制UML的Gravizo。下一篇文章我们来研读 Markdown的一些特性。
前端开发whqet,关注前端开发,分享相关资源。csdn专家博客,王海庆希望能对您有所帮助,限于作者水平有限,出错难免,欢迎拍砖! 欢迎任何形式的转载,烦请注明装载,保留本段文字。 本文原文链接,http://blog.csdn.net/whqet/article/details/44281463 欢迎大家访问独立博客http://whqet.github.io
--------------------------------------------------------------------------------------------5---------------------------------------------------------------------------------------------------
目录 前言 Markdown特点 Markdown快速上手 1 使用快捷键 粗体斜体 引用 链接 高亮代码块 图片 标题 列表 分割线 撤销重复 2 使用离线写作 3 使用导入导出 4 个性定制文章模板 声明
Markdown是一种轻量级的标记语言,把作者从繁杂的排版工作中解放出来,实现易读易写的文章写作,已经逐渐成为事实上的行业标准。博客支持Markdown可以让广大博友更加专注于博客内容,大赞。但是,不少博友可能对Markdown比较生疏,本博接下来用一个系列文章《Markdown简明教程》扼要介绍Markdown,希望可以对大家有所帮助。
系列教程目录
关于Markdown Markdown基本使用 Markdown表格和公式 Markdown UML图 Markdown快速上手 Markdown 参考手册本文为《Markdown简明教程》系列教程的第5篇 Markdown快速上手,主要讲解 Markdown的特点、快速上手、个性定制文章模板等。
Markdown从StackEdit改编而来,正如StackEdit官网所言,Markdown专注内容、专注写作,可以代理无与伦比的写作体验(Unrivalled writing experience)。最令人心动的特征包括:
实时预览 同步滚动 LaTex数学公式、UML序列图和流程图 导入导出MD文件 支持离线写作 几乎全程的键盘操作Markdown的使用原则是尽量不让格式操作影响文章写作,让我们更加专注与行文思路、文章内容。所以,尽管 Markdown内置了比较丰富的工具栏,但是建议大家行文过程中,尽量少用工具栏,少用鼠标,尽量使用手写语法格式,可以适度使用快捷键。
我们先来看看 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,不错的功能,强烈建议使用。
大家可以直接使用 Markdown实现离线写作,浏览器会自动存储大家的写作进度,也可以使用其他Markdown编辑工具(例如window平台下的markdown pad、mac平台下Mou等)写作完毕,再导入到 Markdown里。
使用 Markdown的好处在于,可以一步到位地编辑文章,包括图片的上传和部署,文章摘要、文章参数的设置。 使用客户端编辑工具的好处在于, 文章写作操作的稳定性。Markdown内置了导入导出功能,这个功能非常有用,如下所示。
实现不同平台间共享文件,例如不少博友同步更新自己的独立博客,我的独立博客。 收集整理文章形成电子书,gitbook就是一个不错的方案。 博文与PPT之间的相互转换,可参考这里。在博文写作过程中,每种类型的文章都有一些通用的格式,例如版权声明标识、例如原创翻译文章的“译者说”等。如果可以个性定制文章模板,需要的时候调用将能极大地提高工作效率,接下来大家介绍下我的做法。
我们可以利用 Markdown编辑器创建文章模板,然后利用“导出到本地”功能将模板存到本地(或网络地址),需要该模板时使用“从本机导入”(或“从线上导入”)即可。
本系列文章的通用部分即用这种方式完成。
前端开发whqet,关注前端开发,分享相关资源。csdn专家博客,王海庆希望能对您有所帮助,限于作者水平有限,出错难免,欢迎拍砖! 欢迎任何形式的转载,烦请注明装载,保留本段文字。 本文原文链接,http://blog.csdn.net/whqet/article/details/44318301 欢迎大家访问独立博客http://whqet.github.io
视频教程:http://edu.csdn.net/course/detail/553