个人笔记-markdown使用入门

1. Markdown基本语法

目录前

目录

• 1. Markdown基本语法
  • 1.1. Markdown基本语法
  • 1.2. Markdown 语法手册 （完整整理版）
  • 1.3. 编辑器
  • 1.4. VS Code 搭建高效 markdown 编辑环境
  • 1.5. TOC自动生成目录
  • 文档标题应该「SHOULD」这样写。
  • 1.6. 标题
    • 1.6.1. 这是三级标题。
      • 1.6.1.1. 这是四级标题
        • 1.6.1.1.1. 这是五级标题
          • 1.6.1.1.1.1. 这是六级标题。
  • 1.7. 字体
  • 1.8. 分割线
  • 1.9. 图片
  • 1.10. 链接
    • 1.10.1. 内联方式链接
    • 1.10.2. 引用方式链接
  • 1.11. 列表
    • 1.11.1. 无序列表
    • 1.11.2. 有序列表
  • 1.12. 表格
  • 1.13. 代码
  • 1.14. mermaid 图
    • 节点
    • 连线
    • mermaid中节点文本换行
    • node text color
  • 1.15. 流程图
    • 1.15.1. 定义元素的语法
      • 1.15.1.1. tag
      • 1.15.1.2. content
      • 1.15.1.3. url
    • 1.15.2. 连接元素的语法
    • 1.15.3. 流程图example
  • 1.16. 导出为pdf
  • 1.17. vscode辅助功能
  • 1.18. 页内跳转链接
    • 1.18.0.1. Markdown目录树、锚anchor和页内跳转
    • 1.18.1. 页内跳转链接例子
    • 1.18.2. MarkDown页内跳转实现
      • 1.18.2.1. 先定义一个锚(id)
      • 1.18.2.2. 然后使用markdown的语法:
  • 1.19. 折叠
  • 1.20. 自动序号TOC section
  • 1.21. markdown添加本地图片
    • 1.21.1. 同级目录图片
    • 1.21.2. 子目录图片
    • 1.21.3. 其它目录图片
    • 1.21.4. 绝对路径
  • 1.22. 使用Html样式和折叠语法
    • 1.22.1. 参考文章
    • 1.22.2. 语法要点
      • 1.22.2.1. 示例1
    • 1.22.3. 语法要点说明
      • 1.22.3.1. 示例-文本
      • 1.22.3.2. 示例-文本段落
      • 1.22.3.3. 示例-代码
      • 1.22.3.4. 示例-原有格式显示代码
      • 1.22.3.5. 示例-blockcode
      • 1.22.3.6. 示例-原有格式显示blockcode
  • 文字对齐
  • Markdown中使用缩进
    • 链接
    • 诉求
    • 方法
  • Markdown注释
  • 1.23. end

目录后

回到目录前 *** 回到目录后

1.1. Markdown基本语法

1.2. Markdown 语法手册 （完整整理版）

1.3. 编辑器

visual studio code可以编辑markdown文本。可以在visual studio的设置里的extensions，安装 markdown 插件，如 markdownlint， markdown checkbox，Markdown All in One，Markdown Preview Enhance, Markdown TOC, markdown_index, fold, explicit folding。
Markdown Preview Enhanced 内部支持 mermaid, PlantUML, WaveDrom, GraphViz，Vega & Vega-lite，Ditaa 图像渲染。 安装Markdown Preview Enhance后，在右上角选择Markdown Preview Enhance：open preview,也就是三角形，B， I" 的左边的左边，可以看到流程图。右上角"三角形，B， I" 的左边是自带的preview，好像不支持流程图。
Markdown TOC有自动生成目录和标题序号的功能。

1.4. VS Code 搭建高效 markdown 编辑环境

1.5. TOC自动生成目录

在渲染 Markdown 文本时加入了 toc 拓展后，就可以在文中插入目录了。方法是在书写 Markdown 文本时，在你想生成目录的地方插入

目录

• 1. Markdown基本语法
  • 1.1. Markdown基本语法
  • 1.2. Markdown 语法手册 （完整整理版）
  • 1.3. 编辑器
  • 1.4. VS Code 搭建高效 markdown 编辑环境
  • 1.5. TOC自动生成目录
  • 文档标题应该「SHOULD」这样写。
  • 1.6. 标题
    • 1.6.1. 这是三级标题。
      • 1.6.1.1. 这是四级标题
        • 1.6.1.1.1. 这是五级标题
          • 1.6.1.1.1.1. 这是六级标题。
  • 1.7. 字体
  • 1.8. 分割线
  • 1.9. 图片
  • 1.10. 链接
    • 1.10.1. 内联方式链接
    • 1.10.2. 引用方式链接
  • 1.11. 列表
    • 1.11.1. 无序列表
    • 1.11.2. 有序列表
  • 1.12. 表格
  • 1.13. 代码
  • 1.14. mermaid 图
    • 节点
    • 连线
    • mermaid中节点文本换行
    • node text color
  • 1.15. 流程图
    • 1.15.1. 定义元素的语法
      • 1.15.1.1. tag
      • 1.15.1.2. content
      • 1.15.1.3. url
    • 1.15.2. 连接元素的语法
    • 1.15.3. 流程图example
  • 1.16. 导出为pdf
  • 1.17. vscode辅助功能
  • 1.18. 页内跳转链接
    • 1.18.0.1. Markdown目录树、锚anchor和页内跳转
    • 1.18.1. 页内跳转链接例子
    • 1.18.2. MarkDown页内跳转实现
      • 1.18.2.1. 先定义一个锚(id)
      • 1.18.2.2. 然后使用markdown的语法:
  • 1.19. 折叠
  • 1.20. 自动序号TOC section
  • 1.21. markdown添加本地图片
    • 1.21.1. 同级目录图片
    • 1.21.2. 子目录图片
    • 1.21.3. 其它目录图片
    • 1.21.4. 绝对路径
  • 1.22. 使用Html样式和折叠语法
    • 1.22.1. 参考文章
    • 1.22.2. 语法要点
      • 1.22.2.1. 示例1
    • 1.22.3. 语法要点说明
      • 1.22.3.1. 示例-文本
      • 1.22.3.2. 示例-文本段落
      • 1.22.3.3. 示例-代码
      • 1.22.3.4. 示例-原有格式显示代码
      • 1.22.3.5. 示例-blockcode
      • 1.22.3.6. 示例-原有格式显示blockcode
  • 文字对齐
  • Markdown中使用缩进
    • 链接
    • 诉求
    • 方法
  • Markdown注释
  • 1.23. end

文档标题应该「SHOULD」这样写。

文档标题应该「SHOULD」这样写,3引号以内的内容，不包含3引号。

Markdown 编写规范
==========================

1.6. 标题

1.6.1. 这是三级标题。

1.6.1.1. 这是四级标题

1.6.1.1.1. 这是五级标题

1.6.1.1.1.1. 这是六级标题。

在想要设置为标题的文字前面加井号来表示标题，井号和文字之间加空格。每个井号增加一级，字体变小一级。一级标题，字体最大，上下都要是空行。

1.7. 字体

要加粗的文字左右分别用两个星号包起来,不能加空格

这是加粗的文字2

将需要设置为斜体的文字两端使用1个星号或者下划线夹起来,不能加空格

这是倾斜的文字2

这是倾斜的文字2

要倾斜和加粗的文字左右分别用三个星号包起来
这是斜体加粗的文字

要加删除线的文字左右分别用两个连续的波浪号号包起来

这是加删除线的文字

大于号加空格表示块注释

在引用的文字前加大于号即可。引用也可以嵌套，如加两个连续的大于号，或者三个连续的大于号
这是引用的内容2

这是引用的内容3

这是引用的内容4

我是黑体字
我是微软雅黑
我是红色
我是蓝色
我是尺寸
我是黑体，绿色，尺寸为5

1.8. 分割线

分割线, 三个星号, 或者在空白行下方三个或者三个以上的中横线都可以实现分割线。三个星号上面不是在空白行也可以实现分割线。

---

---

---

脚注（footnote） hello[^hello]

下划线 在空白行下方添加三条“-”横线。（前面讲过在文字下方添加“-”，实现的2级标题）??

1.9. 图片

图片，感叹号开始，中括号里是图片名称，圆括号里是图片地址

图片alt就是显示在图片下面的文字，相当于对图片内容的解释。
图片title是图片的标题，当鼠标移到图片上时显示的内容。title可加可不加

1.10. 链接

1.10.1. 内联方式链接

超链接名， title可加可不加
This is an example link

1.10.2. 引用方式链接

引用方式链接（Links）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"

1.11. 列表

1.11.1. 无序列表

无序列表用 - + * 任何一种都可以, 注意：- + * 跟内容之间都要有一个空格。
列表嵌套, 上一级和下一级之间的“- + * ，数字加点 ”敲三个空格即可

• 无序列表用 - + * 任何一种都可以, 注意：- + * 跟内容之间都要有一个空格
• 在文字开头添加(*, +, and -)实现无序列表
• 无序列表
• 无序列表
  • 二级无序列表内容
  • 二级无序列表内容
  • 二级无序列表内容

1.11.2. 有序列表

有序列表语法：数字加点, 注意：序号跟内容之间要有空格

1. 有序列表语法：数字加点, 注意：序号跟内容之间要有空格，数字可以不按顺序。markdown会自动排序。
2. 列表内容2
3. 列表内容3
4. 列表内容4
   1. 列表内容3-1
   2. 列表内容3-2

数字不能省略，但顺序可以是乱的，编译后顺序自然就是正确的了。

1.12. 表格

表格，第二行分割表头和内容。有一个中括号就行，为了对齐，多加了几个。

姓名	技能	排行
刘备	哭	大哥
关羽	打	二哥
张飞	骂	三弟

1.13. 代码

单行代码：代码之间分别用一个反引号包起来，是波浪号下面的反引号

create database hero;

代码内容

代码块：代码之间分别用三个反引号包起来，且两边的反引号单独占一行

  代码块...
  代码块...
  代码块...

第一种代码（HTML中所谓的Code）：简单文字出现一个代码框。使用<blockquote>。（不是单引号而是左上角的ESC下面~中的）
第二种代码（HTML中所谓的Code）：大片文字需要实现代码框。使用Tab和四个空格。

1.14. mermaid 图

graph TD; A-->B; A-->C; B-->D; C-->D;

Markdown里面使用mermaid画流程图

markdown 中流程图详解

节点

有以下几种节点和形状：

默认节点 A
文本节点 B[bname]
圆角节点 C(cname)
圆形节点 D((dname))
非对称节点 E>ename]
菱形节点 F{fname}
平行四边形节点 G[/fname/]
平行四边形节点 H[fname]
梯形节点 I[/fname]
梯形节点 J[fname/]

- 节点形状
    + [矩形]
        - [[暂不支持]]
        - [(圆柱)]
        - [{暂不支持}]
        - [/平行四边形/]
        - [平行四边形]
        - [/梯形]
        - [梯形/]
    + (圆角矩形)
        - ((圆形))
        - ([体育场])
        - ({暂不支持})
    + {菱形}
        - {{六边形}}
        - {[暂不支持]}
        - {(暂不支持)}
    + >不对称矩形]

连线

节点间的连接线有多种形状，而且可以在连接线中加入标签：

箭头连接 A1–>B1
开放连接 A2—B2
标签连接 A3–text—B3 或者 A3—|text|B3
箭头标签连接 A4–text –>B4 或者 A4–>|text|B4
虚线开放连接 A5.-B5 或者 A5-.-B5 或者 A5..-B5
虚线箭头连接 A6.->B6 或者 A6-.->B6
标签虚线连接 A7-.text.-B7
标签虚线箭头连接 A8-.text.->B8
粗线开放连接 A9=B9
粗线箭头连接 A10>B10
标签粗线开放连接 A11text=B11
标签粗线箭头连接 A12text>B12

mermaid中节点文本换行

换行：在文本中使用
进行分隔
eg：A((This is the
text
in the circle))
issues： https://github.com/knsv/mermaid/issues/384
https://blog.csdn.net/yovven/article/details/101348911

node text color

https://github.com/mermaid-js/mermaid/issues/487

I think Mermaid should allow changing the text color on a per-node basis.
In the example below, the diagram would look a lot better if the MySQL text was white:

graph LR
MyApp --> DB(fa:fa-database MySQL)

style DB fill:#00758f

graph LR MyApp --> DB(fa:fa-database MySQL) style DB fill:#00758f

关于写作那些事之快速上手Mermaid流程图

回到目录前 *** 回到目录后

1.15. 流程图

流程图以一行三个反引号(波浪号下面的反引号)加flow开始，以一行三个反引号结束。
使用Markdown flow语法画流程图

用markdown flow来画流程图

1.15.1. 定义元素的语法

tag=>type: content:>url

1.15.1.1. tag

tag就是元素名字，type是这个元素的类型，有6中类型，分别为：

• start # 开始
• end # 结束
• operation # 操作
• subroutine # 子程序
• condition # 条件
• inputoutput # 输入或产出

1.15.1.2. content

content就是在框框中要写的内容，注意type后的冒号与文本之间一定要有个空格。

1.15.1.3. url

url是一个连接，与框框中的文本相绑定

1.15.2. 连接元素的语法

用->来连接两个元素，需要注意的是condition类型，因为他有yes和no两个分支，所以要写成condition类型的元素名字加括号里的yes或者no，即condition_tag(yes),或者condition_tag(no)

1.15.3. 流程图example

st=>start: 开始
op=>operation: My Operation
cond=>condition: Yes or No?
e=>end
st->op->cond
cond(yes)->e
cond(no)->op

1.16. 导出为pdf

安装markdown pdf后，在右键菜单中选择markdown pdf: export(pdf), 就能导出为pdf文件。
导出的为pdf文件里没有流程图。

1.17. vscode辅助功能

在右键菜单中可以辅助生成字体、有序列表，表格、链接等。

1.18. 页内跳转链接

1.18.0.1. Markdown目录树、锚anchor和页内跳转

Markdown会自动给每一个h1~h6标题生成一个锚，其id就是标题内容。目录树中的每一项都是一个跳转链接，点击后就会跳转到其对应的锚点（即标题所在位置）。你可以点击本文档开始处的目录树尝试一下。

如果需要在目录树之外还要增加跳转到某个标题的链接，使用Markdown的语法来增加跳转链接：“名称”。其中的“名称”可以随便填写，“id”需要填写跳转到的标题的内容。

1.18.1. 页内跳转链接例子

页内跳转-字体
页内跳转-vscode辅助功能

1.18.2. MarkDown页内跳转实现

1.18.2.1. 先定义一个锚(id)

Hello World

1.18.2.2. 然后使用markdown的语法:

XXXX

回到目录前 *** 回到目录后

1.19. 折叠

安装Fold后，可以按标题选择折叠或者展开。
Fold，Automatic folding of indented lines for Visual Studio Code。

1.20. 自动序号TOC section

只能给标题生成序号。
选择“TOC sections: Insert/Update”， 可在标题前面增加“1.18. ， 1.18.1. 1.19. ”等序号。
选择“TOC sections: Delete”， 可删除“TOC sections: Insert/Update”在标题前面增加的序号。
只有标题，没有正文，好像不能添加序号。

回到目录前 *** 回到目录后

1.21. markdown添加本地图片

markdown使用相对路径插入本地图片。

1.21.1. 同级目录图片

比如你把一个叫做1.png的图片和*.md文件放在一起，插入图片方式：

1.21.2. 子目录图片

如果在同一层级目录，在子目录subdir中, 插入图片方式:

1.21.3. 其它目录图片

如果markdown文件在一个目录下，要添加另一个目录下的图片最好先用..命令返回上一级目录，直至可以顺利找到要添加图片的目录。
比如你的markdown在_{/Document/mymarkdown/test下，需要添加}/Downloads/Pic/background目录下的sunlight.jpg，插入图片方式：

1.21.4. 绝对路径

不建议使用绝对路径插入图片。有人说不能用。

回到目录前 *** 回到目录后

1.22. 使用Html样式和折叠语法

1.22.1. 参考文章

使用折叠语法details语法后，其中的内容自动折叠，可以手工展开。

【MarkDown】使用Html样式和折叠语法

使用Html样式和折叠语法

使用Html样式和折叠语法

http://www.mamicode.com/info-detail-2435930.html

https://www.cnblogs.com/buwuliao/p/9578918.html

1.22.2. 语法要点

1.22.2.1. 示例1

点击时的区域标题：点击查看详细内容

文本

- 测试 测试测试

  title，value，callBack可以缺省   

   blockcode   

code

1.22.3. 语法要点说明

summary：折叠语法展示的摘要

details：折叠语法标签

pre：以原有格式显示元素内的文字是已经格式化的文本。

blockcode：表示程序的代码块。

code：指定代码范例。代码中不能有空行，否则不能全部折叠。code里有#号，也会造成排序错误。

1.22.3.1. 示例-文本

示例-文本概要

示例-文本详细内容

1.22.3.2. 示例-文本段落

示例-文本段落概要

示例-文本段落详细内容

1.22.3.3. 示例-代码

示例-代码概要

示例-代码详细内容

1.22.3.4. 示例-原有格式显示代码

这个模式适合用来包含命令执行记录。

示例-原有格式显示代码概要

  
示例-原有格式显示代码详细内容
 

1.22.3.5. 示例-blockcode

示例-blockcode概要

示例-blockcode详细内容

1.22.3.6. 示例-原有格式显示blockcode

示例-原有格式显示代码概要

  
  示例-原有格式显示blockcode详细内容
   

文字对齐

如何在markdown中设置文字右对齐，确实找到了右对齐的方式：

右对齐

1 效果如下：

右对齐

居中 1 效果如下：

居中

左对齐

1 效果如下：

左对齐

Markdown中使用缩进

链接

Markdown中使用缩进

诉求

在使用Markdown（gitbook）进行文档编辑时，为使文档排版美观，往往需要进行缩进，如果在列表中，若某个列表项包含多个段落时，希望后面的段落与带标号的段落保持首字对其；或者在列表项中包含表格时，希望表格整体进行缩进。

方法

在Markdown中可以通过两种符号来进行缩进：可用使用4个空格或者1个Tab进行缩进，同时不同段落之间要保留一个空行。
使用上面的方法也可以进行多级缩进。

Markdown注释

以冒号开头的注释
　　以冒号开头的注释，会被编译到 Html 文档中，并且会呈现出特殊的效果。

1.23. end

回到目录前 *** 回到目录后