超全面的makedown语法讲解！涉及一点KaTeX与时序图 原创

文章目录

0. 介绍一下md？

Markdown是一种轻量级的「标记语言」

Markdown是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。它允许人们使用易读易写的纯文本格式编写文档，然后转换成格式丰富的HTML页面，Markdown文件的后缀名便是“.md”>Markdown是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。它允许人们使用易读易写的纯文本格式编写文档，然后转换成格式丰富的HTML页面，Markdown文件的后缀名便是“.md”

1 纯md语法的使用

1.1 快捷键

功能快捷键
加粗Ctrl + B
斜体Ctrl + I
引用Ctrl + Q
插入链接Ctrl + L
插入代码Ctrl + K
插入图片Ctrl + G
提升标题Ctrl + H
有序列表Ctrl + O
无序列表Ctrl + U
横线Ctrl + R
撤销Ctrl + Z
重做Ctrl + Y

1.2 字符效果和横线等

1.2.1 横线
----
1.2.2 删除线

删除线（开启识别HTML标签时）

<s>删除线（开启识别HTML标签时）</s>
1.2.3 斜体字

斜体字 斜体字

*斜体字*      _斜体字_
1.2.4 粗体

粗体 粗体

**粗体**  __粗体__
1.2.5 粗斜体

粗斜体 粗斜体

***粗斜体*** ___粗斜体___
1.2.6 上标与下标

上标：X2，下标：O2

上标：X<sub>2</sub>，下标：O<sup>2</sup>
1.2.7 缩写(同HTML的abbr标签)

即更长的单词或短语的缩写形式，前提是开启识别HTML标签时，已默认开启
The <abbr title="Hyper Text Markup Language">HTML</abbr> specification is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>.
The HTML specification is maintained by the W3C.

1.2.8 引用 Blockquotes

引用文本 Blockquotes

> 引用文本 Blockquotes

引用的行内混合 Blockquotes

引用：如果想要插入空白换行即<br />标签，在插入处先键入两个以上的空格然后回车即可，

1.3 各级标签

标签 1

标签 2

标签 3

标签 4
标签 5
标签 6
# 标签 1
## 标签 2
### 标签 3
#### 标签 4
##### 标签 5
###### 标签 6

1.4. 列表

1.4.1 无序列表（减号）
  • 列表一
  • 列表二
  • 列表三
- 列表一
- 列表二
- 列表三
1.4.2 无序列表（星号）
  • 列表一
  • 列表二
  • 列表三
* 列表一
* 列表二
* 列表三
1.4.3 无序列表（加号和嵌套）
  • 列表一
  • 列表二
    • 列表二-1
    • 列表二-2
    • 列表二-3
  • 列表三
    • 列表一
    • 列表二
    • 列表三
+ 列表一
+ 列表二
    + 列表二-1
    + 列表二-2
    + 列表二-3
+ 列表三
    * 列表一
    * 列表二
    * 列表三
1.4.4 有序列表
  1. 第一行
  2. 第二行
  3. 第三行
1. 第一行
2. 第二行
3. 第三行
1.4.5 任务列表(GFM task list)
  • GFM task list 1
  • GFM task list 2
  • GFM task list 3
    • GFM task list 3-1
    • GFM task list 3-2
    • GFM task list 3-3
  • GFM task list 4
    • GFM task list 4-1
    • GFM task list 4-2
- [x] GFM task list 1
- [x] GFM task list 2
- [ ] GFM task list 3
    - [ ] GFM task list 3-1
    - [ ] GFM task list 3-2
    - [ ] GFM task list 3-3
- [ ] GFM task list 4
    - [ ] GFM task list 4-1
    - [ ] GFM task list 4-2

1.5 链接

1.5.1普通链接

普通链接

[普通链接](http://www.sa128.cn/)

普通链接带标题

[普通链接带标题](http://www.sa128.cn/ "普通链接带标题")
1.5.2直接链接

直接链接：https://www.sa128.cn

直接链接：<https://www.sa128.cn>

1.6 代码显示与预格式文本

1.6.1 行内代码

ptintf("hello,world");

`ptintf("hello,world");`
1.6.2 代码块
#include<stdio.h>
	int main()
	{
	ptintf("hello,world");
	return 0;
}

c
#include<stdio.h>
	int main()
	{
	ptintf("hello,world");
	return 0;
}
1.6.3 预格式化文本：
Q：什么预格式化文本？
A：格式化输出，就是<pre></pre>标记之间的内容按原文件的版式输出，空格换行不会忽略，pre标签很适合显示计算机代码。
这个例子演示使用 pre 标签
对空行和    空格
进行控制

<pre>
这个例子演示使用 pre 标签
对空行和    空格
进行控制
</pre>

1.7 图片

1.7.1图片插入

3HCZzF.jpg

![](https://i.loli.net/2019/08/23/oW6UcAqpVOSrZCu.jpg)

TIP:![](在这里放入你的图片地址)
Q：为什么我们网站的MD不能在本地上传图片？
A：因为过量的图片会浪费服务器资源，所以我们需要将图片上传至 https://sm.ms/ ，然后将其中的MAKEDOWN连接放入即可。

1.8 表格

项目价格数量
计算机$16005
手机$1212
管线$1234
| 项目        | 价格   |  数量  |
| --------   | -----:  | :----:  |
| 计算机      | $1600   |   5     |
| 手机        |   $12   |   12   |
| 管线        |    $1    |  234  |
Function nameDescription
help()Display the help window.
destroy()Destroy your computer!
| Function name | Description                    |
| ------------- | ------------------------------ |
| `help()`      | Display the help window.       |
| `destroy()`   | **Destroy your computer!**     |

1.9 特殊符号与实体符号

1.9.1 特殊符号

© & ¨ ™ ¡ £
& < > ¥ € ® ± ¶ § ¦ ¯ « ·

X² Y³ ¾ ¼ × ÷ »

18ºC " '

实际填写应加“；”符号
&copy &  &uml &trade &iexcl &pound
&amp &lt &gt &yen &euro &reg &plusmn &para &sect &brvbar &macr &laquo &middot

X&sup2 Y&sup3 &frac34 &frac14  &times  &divide   &raquo

18&ordm C  &quot  &apos
1.9.2 实体符号
实体编号:实际填写应加“；”符号
显示结果描述实体名称实体编号
空格 &#160
<小于号&lt&#60
>大于号>&#62
&和号&&#38
"引号"&#34
’撇号' (IE不支持)&#39
￠分（cent）¢&#162
£镑（pound）£&#163
¥元（yen）¥&#165
€欧元（euro）€&#8364
§小节&sect&#167
©版权（copyright）©&#169
®注册商标®&#174
™商标&trade&#8482
×乘号&times&#215
÷除号&divide&#247

1.10 分页

1.10.1分页符
<div STYLE="page-break-after: always;"></div>

Q:这个符号有什么用？
A：在到处PDF的情况下，在你想要的分页就位子插入就可以了！

1.11 emoji

😋

:yum:
1.11.1 参考网站

https://www.webfx.com/tools/emoji-cheat-sheet/

Print Test: Ctrl + P

2 插件部分内容

2.1 自动生成目录（新版过时，老版有效）

#### 2.1.1前期工作 一款好用的文本编辑器，用来编辑html文档。推荐使用sublime text；

你的markdown文件中必须存在目录结构，即不同级别的标题。

把你的markdown文件转化成html，这一步可以使用sublime text的插件 Markdown Preview 或 OmniMarkupPreviewer 来完成。推荐使用后者，预览效果相对丰富一些；

2.1.(2)前期工作

下载markdownPad软件.
MarkdownPad安装包下载链接
链接：https://pan.baidu.com/s/1o7c4W7C2d8zCPh5z7y4IvQ
提取码：e4bf

下载解压之后，找要MarkdownPad2.exe打开

点击Enter Key 进入输入邮箱和License key
Email address : Soar360@live.com
License key :
GBPduHjWfJU1mZqcPM3BikjYKF6xKhlKIys3i1MU2eJHqWGImDHzWdD6xhMNLGVpbP2M5SN6bnxn2kSE8qHqNY5QaaRxmO3YSMHxlv2EYpjdwLcPwfeTG7kUdnhKE0vVy4RidP6Y2wZ0q74f47fzsZo45JE2hfQBFi2O9Jldjp1mW8HUpTtLA2a5/sQytXJUQl/QKO0jUQY4pa5CCx20sV1ClOTZtAGngSOJtIOFXK599sBr5aIEFyH0K7H4BoNMiiDMnxt1rD8Vb/ikJdhGMMQr0R4B+L3nWU97eaVPTRKfWGDE8/eAgKzpGwrQQoDh+nzX1xoVQ8NAuH+s4UcSeQ==

然后我们把markdown文件用markdownPad软件打开。左边是源码右边是效果。
然后我们点击菜单栏的“文件”，之后是“导出”，再选择导出的格式，可以看到有html和pdf两项
保存为html文件后，markdown文件可以直接用浏览器打开。
保存为pdf文件后，markdown文件可以直接用pdf阅读器打开。

2.1.2 模板适用

正式开始
首先下载模板

打开下载的文件，可以看到两个文件夹，一个是“官网示例”，另一个是“我的模板”,我们只需要使用“我的模板”；

将“我的模板”复制一份出来，然后用文本编辑器打开其中的 markdownToc.html 。里面标记了两条很明显的内容分割线，你只需要把自己的html文档的正文部分复制到两条内容分割线之间即可，无需进行其他编辑。
687474703a2f2f696d672e626c6f672e6373646e2e6e65742f3230313630343233313632333430313934.png

2.1.1 TOC/TOCM（新版）
2.1.1.1 TOC

在顶部写入[TOC]即可根据#生成目录；

2.1.1.2 TOCM

在顶部写入[TOCM]即可根据#生成目录（下拉菜单形式）；

2.1.1.3 参考

参考本页面顶部

2.2 绘制流程图 Flowchart

2.2.1 简单事例
Created with Raphaël 2.2.0 开始建网站 这玩意可行吗？ 搞不搞 挺一下 搞完 暴毙 yes no

2.2.2 说明

这样几行简单的代码就生成了一个优雅的流程图。
流程图大致分为两段，第一段是定义元素，第二段是定义元素之间的走向。

2.2.3 定义元素的语法

tag=>type: content:>url
tag就是元素名字，
type是这个元素的类型，有6中类型，分别为：
start # 开始
end # 结束
operation # 操作
subroutine # 子程序
condition # 条件
inputoutput # 输入或产出
content就是在框框中要写的内容，注意type后的冒号与文本之间一定要有个空格。
url是一个连接，与框框中的文本相绑定

2.2.4 连接元素的语法

用->来连接两个元素，需要注意的是condition类型，因为他有yes和no两个分支，所以要写成
c2(yes)->io->e
c2(no)->op2->e

2.2.5 更多语法参考

http://adrai.github.io/flowchart.js/

2.3. 时序图 squence

2.3.1 时序图事例
ff kk kk ff kunkun尽情舞蹈... this is kunkun? 卧槽什么鬼？ yes! ff kk kk ff MarkDown 画sequence图 
sequence
title: MarkDown 画sequence图
participant finefine as ff
participant kunkun as kk
note right of kk:kunkun尽情舞蹈...
ff-->kk: this is kunkun?
kk-->kk:卧槽什么鬼？
kk-->ff: yes!
2.3.2 时序图部分语法

grammar.png

2.3.3 更多语法参考

https://bramp.github.io/js-sequence-diagrams/

科学公式 TeX(KaTeX)

E = m c 2 E=mc^2 E=mc2

2.3.4 行内公式

E = m c 2 E=mc^2 E=mc2行内的公式，行内的 E = m c 2 E=mc^2 E=mc2公式。

$$E=mc^2$$行内的公式，行内的$$E=mc^2$$公式。
2.3.5 多行公式
\displaystyle
\left( \sum\_{k=1}^n a\_k b\_k \right)^2
\leq
\left( \sum\_{k=1}^n a\_k^2 \right)
\left( \sum\_{k=1}^n b\_k^2 \right)

\displaystyle
    \frac{1}{
        \Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{
        \frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {
        1+\frac{e^{-6\pi}}
        {1+\frac{e^{-8\pi}}
         {1+\cdots} }
        }
    }

f(x) = \int_{-\infty}^\infty
    \hat f(\xi)\,e^{2 \pi i \xi x}
    \,d\xi

math
\displaystyle
\left( \sum\_{k=1}^n a\_k b\_k \right)^2
\leq
\left( \sum\_{k=1}^n a\_k^2 \right)
\left( \sum\_{k=1}^n b\_k^2 \right)

katex
\frac{1}{
        \Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{
        \frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {
        1+\frac{e^{-6\pi}}
        {1+\frac{e^{-8\pi}}
         {1+\cdots} }
        }
    }
	
	latex
	f(x) = \int_{-\infty}^\infty
    \hat f(\xi)\,e^{2 \pi i \xi x}
    \,d\xi
2.3.6 更多公式参考

https://katex.org/

3 其他

3.1 插入部分

3.1.1 插入音频
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1381723926&auto=1&height=66"></iframe>
3.1.2 插入视频
<iframe height=498 width=510 src="视频地址" frameborder=0 allowfullscreen></iframe>
posted @ 2024-08-11 15:20  俺叫西西弗斯  阅读(0)  评论(0)    收藏  举报  来源