Markdown语法及效果展示

最新推荐文章于 2024-08-19 02:19:49 发布

Dunkle.T

最新推荐文章于 2024-08-19 02:19:49 发布

阅读量3.1k

点赞数 3

分类专栏： Markdown 文章标签： markdown

本文链接：https://blog.csdn.net/weixin_44350337/article/details/121211706

版权

Markdown 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Markdown概述

Markdown是一个Web上使用的文本到HTML的转换工具。
也就是说用简单的文本实现网页文本的表示。使用一些特定的符号组合来达到对文本内容进行美化规整的功能。
锤子科技15年8月发布会上，老罗宣布锤子便签支持Markdown语法。使用Markdown语法在移动端编辑会逐渐成为趋势。但如今Markdown仍未在移动端有所应用，我想是因为手机功能的局限性。目前Markdown的主要功能是写文档，是一份说明或一份资料文档，因此在PC端应用性更强

Markdown的优点

简单标记符即可完成排版，让你专注于文字输入，而非排版。
纯文本文件，兼容性极强，使用任意文本编辑器即可打开编辑。
格式转换方便，Markdown文本可以轻松的转换为html、pdf等。
可读性极好。

Markdown语法示例

1、段落与换行

Markdown段落指的是两部分关联度较低的内容进行分割。进行分割时需要有一个空白行进行增大段落之间的缩进来进行段落分割，具体如下：

文本 Markdown显示效果（后不再赘述）
在这里插入图片描述
在添加空白行之后，Markdown会将两部分分开一定的间隔，但是在文本中添加多个空白行，只会有一个间隔得以显示。

2、标题

使用不同数量的 # 标识符再加一个空格来表示不同级别的标题，以此来展示文档的结构。具体如下：
在这里插入图片描述

3、分割线

在空白行中使用三个以上的 - 符号或 * 符号即可建立分割线，用于分隔上下文。
在这里插入图片描述

4、文本样式

使用单个 * 符号或单个 _ 符号包裹的文本将会被显示为斜体表示强调：
在这里插入图片描述
使用两个 * 符号或两个个 _ 符号包裹的文本将会被显示为粗体表示关键词句：

使用两个 = 符号包裹起来的文本将会添加亮色底色，用于着重突出的关键字：

使用两个 ~ 符号包裹起来的文本将会在显示时添加删除线，一般用于降价或展示错误的写法：
在这里插入图片描述

使用单个 ~ 符号包裹起来的文本将会被显示为下标：
在这里插入图片描述

使用单个 ^ 符号包裹起来的文本将会被显示为上标：
在这里插入图片描述

5、区块引用

在Markdown段落（没用空白行则从属于同一段）的第一行添加 > 符号表示该段文字属引用：
在这里插入图片描述

引用可以进行嵌套，只要根据引用层次再添加一个 > 符号即可：
在这里插入图片描述
引用内部也可以套用包括加粗列表等其他语法：

6、列表

Markdown中有两种列表，分别为有序列表和无序列表。
无序列表使用 * ，+，- 符号后跟一个空格作为列表的标记，其效果一致：
在这里插入图片描述
有序列表使用数字加 . 符号后跟空格进行创建：

最后是计划表，用于显示计划的完成情况。

使用无序列表的 * ，+，- 符号跟空格，包裹空格的中括号，空格组成未完成列表项；使用无序列表的 * ，+，- 符号跟空格，包裹字母x 的中括号，空格组成已完成列表项：
在这里插入图片描述

7、图片链接

链接使用包裹显示链接文本的中括号和包裹链接URL的括号组成，显示为可点击的超链接:
在这里插入图片描述
图片由 !，包裹图片描述的中括号，以及包裹图片URL的括号组成:

图片大小限定：在图片URL的最后加上空格，= 符号，宽度数值，字母x ，高度数值，即可限定图片的宽度和高度（其中可以去掉宽度数值或高度数值，表示仅限定宽度或高度）:
在这里插入图片描述

图片居中: 在图片URL的末尾加上 #pic_center（如果要限定图片大小，则在#pic_center后边添加限制图片大小的空格，= 符号，宽度数值，字母x ，高度数值。同样可以去掉其中一个数值做单一限定。）：
在这里插入图片描述

8、代码段

代码段可由不同行的三个 ` 符号（Esc正下方，英文输入）包裹起来的代码组成。
在这里插入图片描述

在第一行的三个 ` 符号之后可以注明编程语言类型，以便标注关键词。
在这里插入图片描述

9、表格

表格由 | 符号和 - 符号组成，最外侧 | 符号可要，可不要，具体如下：
在这里插入图片描述
表格内部的数值可以设定对齐方式，具体如下：

10、注释

首先是注脚，顾名思义，注脚将解释放置在页脚，也就是文章的最后。注脚使用中括号以及包裹的 ^ 符号加数字组成，在另一行使用注脚加 : 进行注解即可，不需要放置在文章的最后，Markdown自动将注解放置在文章最后
在这里插入图片描述
其次是注解，注解将关键词进行解释，当鼠标悬停在关键词上的时候，会将其解释显示在出现的方框内。其使用是在下一行使用 * 符号加上中括号包裹关键词最后跟一个 : 符号再进行解释

11、自定义列表

自定义列表通常用于说明参与人员以及解释说明，一般不用做文档书写使用。
在这里插入图片描述
不做文档书写使用是因为虽然它可以嵌套，使用Tab键增加下一层的缩进，但是它的缩进效果却出乎意料，结构不规整。

12、数学公式

参考文档：https://khan.github.io/KaTeX/
数学公式也可由文本直接创建，具体方法参考文档，其效果如下：
在这里插入图片描述

13、甘特图（项目进度图）

参考文档：https://mermaid-js.github.io/mermaid/#/gantt
dateFormat是时间格式，使用YYYY代表年份，MM表示月份，DD表示日；title是标题，section是任务名称，后面是任务的具体执行情况（由以下部分组成：项目名称；完成情况，done表完成，active表进行中，空白表未进行；des+数字表示项目代号，表示显示的行号；项目开始时间，可由日期或after des2表示在项目2结束之后开始；项目结束时间，可使用日期或持续时间长度表示，如1d表示项目持续1天。）
在这里插入图片描述

14、UML图（统一建模语言）

参考文档：https://mermaid-js.github.io/mermaid/#/sequenceDiagram
UML图具体创建格式如下：
在这里插入图片描述

15、Mermaid流程图

参考文档：https://mermaid-js.github.io/mermaid/#/flowchart?id=graph
其中ABCD为项目代号，不进行显示；[ ] 表示长方形，{ } 表示菱形，( ) 表示圆角长方形，(( )) 表示圆形，括号里边可以填入项目名称；----> 表示剪头连接，中间可以插入连接说明。具体如下：
在这里插入图片描述

16、程序流程图

参考文档：http://flowchart.js.org/
程序流程图是比较常用的一种流程图，希望大家都能够掌握。flowchart即流程图（在CSDN的创建中不知道为何使用了flowchat，缺少了字母 r）
首先要进行的是节点的创建。先是节点的代号；后面是节点的类型（start: 是开始节点，end是结束节点，operation是执行节点，condition是分支节点）；最后是节点的操作。
其次我们在下一段落描述节点的连接关系。使用 -> 表示节点连接，使用代号直接代指节点；分支节点使用 (yes) 或 (no) 来建立连接关系。具体如下：
在这里插入图片描述

17、classDiagram类图

参考文档：https://mermaid-js.github.io/mermaid/#/classDiagram
类图在说明某个类的结构和功能时会使用到，其创建结构如下：
在这里插入图片描述

HTML标签：

1、换行标签：

在这里插入图片描述

2、空格：

插入一个空格 (non-breaking space)
　　　　&nbsp;    或    &#160;     或      &#xA0;

插入两个空格 (en space)
　　　　&ensp;     或    &#8194;   或      &#x2002;

插入四个空格 (em space)
　　　　&emsp;    或    &#8195;   或      &#x2003;

插入细空格 (thin space)
　　　　&thinsp;   或     &#8201;  或      &#x2009;