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>

附:RGB颜色查询对照表

【修改颜色和大小的效果如下】:

浅红色文字:<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>

附:RGB颜色查询对照表

【效果如下】:

<table><tr><td bgcolor=#ff00ff>背景色是:#ff00ff</td></tr></table>

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,504评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,434评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,089评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,378评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,472评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,506评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,519评论 3 413
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,292评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,738评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,022评论 2 329
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,194评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,873评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,536评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,162评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,413评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,075评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,080评论 2 352

推荐阅读更多精彩内容