Markdown使用指南(转+练习）
一、简介
什么是Markdown?Markdown是一种轻量级的[标记语言]，通常为程序员群体所用，目前它已经是全球最大的技术分享网站GitHub和技术问答网站StackOverFlow的御用书写格式。
有道云笔记内置Markdown编辑器和使用指南，非技术类笔记用户，千万不要被[标记]、[语言]吓到，Markdown的语法十分简单，常用的标记符号不超过十个，用于日常写作记录绰绰有余，不到半小时就能完全掌握。
就是这十个不到的标记符号，却能让人优雅地沉浸式记录，专注内容而不是纠结排版，达到[心中无尘，码字入神]的境界。
二、利用Markedown可以做什么？
2.1 代码高亮
image
2.2 制作待办事项To-do List
image
2.3 高效绘制：流程图、序列图、甘特图、表格
【流程图】：
image
【序列图】：
image
【甘特图】：
image
【表格】：
image
2.4 书写数学公式
image
三、有道云笔记Markdown简明版使用指南
3.1 标题
标题是每篇文章必备而且最常用的格式。
在Markdown中，如果想将一段文字定义为标题，只需要<font color="912CEE">在这段文字前面加上#，再在#后加一个空格即可</font>。还可增加二、三、四、五、六级标题，总共六级，只需要增加#，<font color="912CEE">增加一个#，标题字号相应降低一级</font>。如图：
image
3.2 列表
列表格式也很常用，它可以让你的文稿变得井井有条。在Markedown中，你只需要<font color="912CEE">在文字前面加上-就可以了；如果你希望是有序列表，在文字前面加上1.、2.、3.即可</font>。
注意：1.和文字之间要保留一个字符的空格
image
3.3 引用
如果你需要在文稿中引用一段别处的句子，那么就要用到[引用]格式。<font color="912CEE">在引用文字前加上>并与文字保留一个空格的字符即可</font>。
image
3.4 粗体和斜体
Markdown的粗体和斜体也非常简单：
<font color="912CEE">用两个*包含一段文本就是粗体的语法；</font>
<font color="912CEE">用一个*包含一段文本就是斜体的语法。</font>
image
3.5 链接与图片
<font color="912CEE">链接：在Markdown中插入链接只需要使用[显示文本](链接地址)即可。</font>
<font color="912CEE">图片：在Markdown中，插入图片只需要使用即可。</font>
注意：插入图片的语法和链接的语法很像，只是前面多了一个!
image
3.6 分割线
分割线的语法只需要<font color="912CEE">另起一行，连续输入三个星号***即可</font>分割两段文字内容。如图:
image
3.7 表格
当你需要在Markdown文稿中键入表格，代码如下：
image
【实例参考】：
image
3.8 换行
要想换行，常简的有如下几种：
1.在两段文字中间空一行即可。
2.使用HTML的语法，在文字段末尾增加<br>即可。
注：使用<br>分行间隔是紧挨着的。
3.9 添加代码段
Markdown插入代码段的方法：英文输入法下，输入一对```（就是键盘左上角的~键），然后把代码段黏贴到它们之间，就OK了。
【比如下面的示例】：
#include <stdio.h>
#include <stdlib.h>
int main(void)
{
printf("hello world!\n");
return 0;
}
3.10 显示特殊字符（与Markdown语法冲突字符）
特殊字符的显示可以使用单个'\'来进行显示。
3.11 修改文本的字体
Markdown内嵌HTML语法，可以通过标记的方式修改文本的字体。语法如下：
<font face="黑体">这是一串黑体字</font><br>
<font face="华文彩云">这是一串华文彩云</font><br>
【效果如下】：
<font face="黑体">这是一串黑体字</font>
<font face="华文彩云">这是一串华文彩云</font>
3.12 改变字体的颜色和大小
Markdown内嵌HTML语法，可以通过标记的方式修改字体的颜色和大小。语法如下：
修改字体颜色：<font color="#dd0000">浅红色文字：</font></br>
修改字体大小：<font size="8">size为8</font><br>
【修改颜色和大小的效果如下】：
浅红色文字：<font color="#dd0000">浅红色文字</font></br>
深红色文字：<font color="#660000">深红色文字</font></br>
size为3：<font size="3">size为3</font>
size为5：<font size="5">size为5</font>
3.13 总结
如上前7大格式是写作文稿时最长使用的。后面几个是使用中也比较常见的用法。
怎么样，看了相关Markdown语法是不是觉得挺简单？
当然，Markedown新手在使用不熟练的情况下，可能会忘记相关语法，也没关系，笔记的工具栏内置了Markdown语法，方便学习与熟悉。
如，[表格]语法相对复杂，你可能忘记了，这时候，你只需要点击编辑框上方工具栏，点选[表格]的图标，左边编辑区便于出现[表格]相应代码：
image
然后，你只需要将代码替换成相应文本即可，如图：
image
熟悉语法之后，还是建议大家少使用辅助工具栏，尽量自己键入代码，感受纯文本之美。
当然，有道云笔记的Markdown还能支持制作待办事项，书写流程图、序列图、甘特图，书写数学公式等，是不是够极客，够有逼格？
看看笔记菌用Markdown甘特图写的项目计划时间表：
image
四、有道云笔记Markdown进阶版使用指南
“进阶版”有道云笔记Markdown指南，教你如何进一步掌握代办、清单、流程图和甘特图。
4.1 待办和清单
待办事项和清单在日常工作、生活中经常被使用。
在Markdown中，你只需要在待办的事项文本或者清单前加上-[]、-[x]即可。
-[]表示未完成， -[x]表示已完成。
注：键入字符与字符之间都要保留一个字符的空格。
【具体呈现如下】：
image
4.2 流程图
在Markdown中，一段流程图语法以"`开头，以"`结尾。
在"`后另起一行，书写graph XX，用以确定将要绘制的流程图及其类型（XX表示流程图类型）。
流程图分为竖向和横向两大类，竖向包括自上而下和自下而上两种顺序，横向包括从右到左和从左到右两种顺序。
其对应语法分别为：graph TB/graph BT/graph RL/graph LR
- TB - top bottom （自上而下）
- BT - bottom top （自下而上）
- RL - right left （从右到左）
- LR - left right （从左到右）
【简单示例如图】：
image
image
image
image
【来学习一个具体案例】：
image
仔细研究上述案例，会发现，我们可以通过调整语法来调整流程图的框线、连接线，不同条件能导向不同的结果。
①对框线形状的调整，如：
image
②对箭头的调整，如：
image
只要充分掌握该语法，再复杂的流程图也完全能用Markdown书写！
更详细的流程图语法，可参见：http://knsv.github.io/mermaid/#flowcharts-basic-syntax
4.3 甘特图
我们在工作中用甘特图做计划进度表、项目进度表再合适不过了。
以如下甘特图为例说明：
image
与流程图一样，Markdown中，甘特图的语法也是以"`开头，以"`结尾。
在"`后另起一行，书写gantt，用以确定将要绘制的是甘特图。
标题的书写语法如下：
image
dataFormat YYYY-MM-DD规定了时间轴，title（标题文本）表示甘特图标题。
如需按项目进行划分，需键入section，空一格字符，再输入项目名称的文本（一个section和另一个section之间要空行）。
每个大项目将拆解为若干个小任务，只需在section之后另起一行，直接输入小项目名称即可。
更详细的甘特图语法，参见http://knsv.github.io/mermaid/#styling39
五、Tips for有道云笔记中的Markdown
5.1 实时同步预览，所看即所得
我们将笔记编辑界面一分为二，左边为编辑区，右边为预览区，两区滚动条同步。在编辑区的操作能够实时反映在浏览区，方便及时调整和查看最终版面效果。
5.2 工具栏内置Markdown语法，方便新手学习
编辑页面顶端的工具栏有对应代码，如果你是一个不熟悉Markdown语法的新手，可以先尝试用工具栏辅助操作。也可以在网上搜索[Markdown语法指南]进行学习。
当然，如果你觉得工具栏太打扰，点击下方分界条即可隐藏工具栏，切换到极简编辑环境。
5.3实时云端保存
Markdown模式继承了有道云笔记的优良传统，你每一次击键的内容都会实时保存在云端，无需担心浏览器崩溃、设备没电、突然断网等情况。对于写作者来说，更是再也不用担心因为各种原因痛失文稿的情况了。
5.4 界面大小可点击分解条调整
点击“1”处，工具栏收起；点击“2”处，右侧预览区收起。
image
【点击后灯效果】：
image
六、Markdown其他技巧
6.1 改变背景颜色（未验证成功）
修改文字的背景颜色方法为：
<table><tr><td bgcolor=#ff00ff>背景色是：#ff00ff</td></tr></table>
【效果如下】：
<table><tr><td bgcolor=#ff00ff>背景色是：#ff00ff</td></tr></table>
