Markdown技巧

2023-10-04 21:50| 来源: 网络整理| 查看: 265

Markdown 技巧 (bin59.github.io)

目录 Markdown 技巧生成目录 1. 使用 Markdown-TOC 2. 使用 doctoc 3.vscode 工具自动生成目录 4.手写链接 5.'TOC'标签生成目录区块符号转义符流程图等 Markdown 技巧生成目录 1. 使用 Markdown-TOC

步骤 1：使用 npm 安装 markdown-toc npm install markdown-toc -g 步骤 2：生成目录 markdown-toc README.md 在上面的命令中， README.md 是您的 Markdown 文件名。输入此命令将自动生成一个 Markdown 目录。步骤 3：将目录插入 Markdown 文件中将生成的目录复制到您的 Markdown 文件中。请注意，Markdown-TOC 工具会将目录插入到文件中包含标记的位置。

2. 使用 doctoc

步骤 1：使用 npm 安装 doctoc npm install -g doctoc 步骤 2：生成目录 doctoc README.md 在上面的命令中， README.md 是您的 Markdown 文件名。输入此命令将自动生成一个 Markdown 目录。步骤 3：将目录插入 Markdown 文件中 doctoc 工具会将目录插入到文件中包含和标记之间的位置。您可以将这些标记插入到 Markdown 文件中，然后运行 doctoc 命令以生成和更新目录。

3.vscode 工具自动生成目录

（1）Markdown Preview Enhanced Ctrl + Shift + P 然后选择 Markdown Preview Enhanced:Created TOC

或通过下面命令行自动生成目录

保存后如下：

- [一级标题](#一级标题) - [二级标题](#二级标题) - [符号转义符](#符号-转义符) - [命令行生成目录](#命令行生成目录) - [1. 使用 Markdown-TOC](#1-使用-markdown-toc) - [2. 使用 doctoc](#2-使用-doctoc) - [vscode 工具](#vscode-工具)

（2）Markdown All in One

ctrl+shift+P 输入Markdown All in One: Create Table of Contents

4.手写链接 Markdown 技巧生成目录 1. 使用 Markdown-TOC 2. 使用 doctoc 3.vscode 工具自动生成目录 4.手写链接 5.'TOC'标签生成目录区块符号转义符流程图等点击打开目录 Markdown 技巧生成目录 1. 使用 Markdown-TOC 2. 使用 doctoc 3.vscode 工具自动生成目录 4.手写链接 5.'TOC'标签生成目录区块符号转义符流程图等 5.'TOC'标签生成目录

[TOC]

注意： Markdown 可以使用[TOC]自动生成 Markdown 文件的标题目录，比如在 typora，vscode(需要插件)等本地编辑器中。

但是在网页上比如：Github 不支持[TOC]标签，所以在 Github 的 README.md 上使用[TOC]无法正确显示目录。

区块

这里是区块

这里是区块这里是区块

这里是嵌套区块

符号转义符

添加尾部箭头 - 不添加尾部箭头 -- 单线 --text-- 单线上加文字 == 粗线 ==text== 粗线加文字 -.- 虚线 -.text.- 虚线加文字节点表述说明 id[文字] 矩形节点 id(文字) 圆角矩形节点 id((文字)) 圆形节点 id>文字] 右向旗帜状节点 id{文字} 菱形节点 graph TD; A-->B; A-->C; A-->D; M; B-->F; B-->G; G-->F C-->H; graph LR; a==>b; b-->c; a--联系-->c; a-->s; a-.->f; s-->j; c---id2; subgraph 图表名; id2[默认方形]==粗线==>id3{菱形} id3-.虚线.->id4>右向旗帜] id3--无箭头---id5((圆形)) end

Sequence diagram(顺序图)

sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts prevail... John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

甘特图(Gantt diagram)

gantt dateFormat YYYY-MM-DD title 为mermaid加入甘特图功能 section A部分完成任务 :done, des1,2019-01-06,2019-01-08 正进行任务 :active, des2,2019-01-09,3d 待开始任务 :des3, after des2, 5d 待开始任务2 :des4, after des3, 5d section 紧急任务完成任务 :crit,done,2019-01-06,24h 实现parser :crit,done,after des1, 2d 为parser编写test :crit, active, 3d 待完成任务 :crit,5d 为rendere编写test: 2d 将功能加入到mermaid: 1d

【本文地址】

公司简介

联系我们