首页 > 其他分享 >MarkDown基础及表格、KaTeX公式、矩阵、流程图、UML图、甘特图语法

MarkDown基础及表格、KaTeX公式、矩阵、流程图、UML图、甘特图语法

时间：2024-01-24 10:59:33浏览次数：30  
标签：11 MarkDown 效果 -- 呈现 甘特图 对象 KaTeX 对齐

概述

最多可设置6级标题

技巧

列表

有序列表

MD语法：

1. 你好
2. 我也好

呈现效果：

  1. 你好
  2. 我也好

无序列表

MD语法：

- a
- b
* aa
* bb
+ aaa
+ bbb

效果：

  • a
  • b
  • aa
  • bb
  • aaa
  • bbb

结论，支持三种方式：-、*、+

TODO列表

MD语法：

- [x] 后端接口开发
- [ ] 与前端联调

呈现效果：

加粗斜体与删除线

MD语法：

*斜体*，_斜体1_，**加粗**，__加粗1__，***粗斜体***，**_粗斜体1_**，~~删除线~~

效果：
斜体，斜体1，加粗，加粗1，粗斜体，粗斜体1，删除线

结论：一个*或_表示斜体，两个*或_表示加粗，三个*或_表示加粗斜体。

分割线

单独一行里输入3个或以上的短横线-、星号*或下划线_。

引用、嵌套引用

一个>表示引用，两个>表示嵌套引用
效果：

鲁迅：我不见他，已是三十多年；今天见了，精神分外爽快。才知道以前的三十多年，全是发昏；然而须十分小心。不然，那赵家的狗，何以看我两眼呢？

嵌套引用

超链接

支持类HTML方式：
<a href="http_url" alt="提示文本">超链接1</a>
效果：超链接1

[超链接2](http_url "alt 提示")
效果：超链接2

表格

设置表格内容对齐

MD语法：

| 左对齐标题 | 右对齐标题 | 居中对齐标题 | 居中对齐标题
| :------| ------: | :------: | --
| 短文本 | 中等长度文本 | 稍微长一点的文本 | 稍微长一点的文本
| 稍微长一点的文本 | 短文本 | 中等文本 | 中等文本

效果

左对齐标题 右对齐标题 居中对齐标题 居中对齐标题
短文本 中等长度文本 稍微长一点的文本 稍微长一点的文本
稍微长一点的文本 短文本 中等文本 中等文本

也就是说：两个横杠--即可代表一个列，默认是居中，故两侧的冒号:可以省略。冒号:加在左边，即表示左对齐；冒号加在右边，即表示右对齐。

设置表格内容换行

MD语法：

标题 | 我想要这个注释居中
:--|--
我想要这个标题左对齐 | 第一行<br>第二行

效果

标题 我想要这个注释居中
我想要这个标题左对齐 第一行
第二行

结论：<br>可以实现换行

设置表格内容合并

MD语法：

标题左对齐 | 我想要这个右对齐
:--|--:
合并的标题|第一行<hr>第二行

效果

标题左对齐 我想要这个居中对齐 我想要这个右对齐
合并的标题 第一行第一列
第二行第一列		 第一行第二列
有很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多第二行第二列

结论：<hr>可以实现其他列合并

但是比较丑！尤其是在表格内容长度不一的情况下。

表格里含有特殊字符

表格以|作为分隔符，那如果我想要在表格单元格里面添加|，如何实现？加上转义字符\即可。其他特殊字符也是一样的处理方式。

MD语法：

模式|解释
--|--
`p1\|p2`|交替匹配任意 p1 或 p2

效果

模式 解释
p1|p2 交替匹配任意 p1 或 p2

公式

Markdown Preview Enhanced使用KaTeX或MathJax来渲染数学表达式。KaTeX比MathJax性能更好，但却缺少很多MathJax拥有的特性。

两种公式编写方式：

  • $...$或\(...\)中的数学表达式将会在行内显示
  • $$...$$或\[...\]或```math中的数学表达式将会在块内显示

常用符号

下标：$a_{11}$，呈现效果：$a_{11}$
上标：$a^{11}$，呈现效果：$a^{12}$
分数：$\frac{a}{b}$，呈现效果$\frac{a}{b}$
向量：$\vec{a}$，呈现效果：$\vec{a}$
累加：$\sum$，呈现效果：$\sum$
累积：$\prod$，呈现效果：$\prod$
无穷大：$\infty$，呈现效果：$\infty$
1重积分：$\int\frac{dx}{1+x^2}=arctanx+C$，呈现效果：$\int\frac{dx}{1+x^2}=arctanx+C$
2重积分：$\iint$，呈现效果：$\iint$
3重积分：$\iiint$，呈现效果：$\iiint$

微分：

希腊字母

字母 markdown语法 呈现效果
alpha $\alpha$ $\alpha$
beta $\beta$ $\beta$
gamma $\gamma$ $\gamma$
delta $\delta$ $\delta$
epsilon $\epsilon$ $\epsilon$
zeta $\zeta$ $\zeta$
eta $\eta$ $\eta$
theta $\theta$ $\theta$
lambda $\lambda$ $\lambda$
pi $\pi$ $\pi$
omega $\omega$ $\omega$
psi $\psi$ $\psi$
sigma $\sigma$ $\sigma$
rho $\rho$ $\rho$
xi $\xi$ $\xi$
tau $\tau$ $\tau$
kappa $\kappa$ $\kappa$
mu $\mu$ $\mu$
nu $\nu$ $\nu$
chi $\chi$ $\chi$
upsilon $\upsilon$ $\upsilon$

实战

实例语法：

呈现效果：
$$(1+x)^a$$

方程组

起始、结束处以{cases}声明

示例：

$$\begin{cases}
a_1x+b_1y+c_1z=d_1\\
a_2x+b_2y+c_2z=d_2\\
a_3x+b_3y+c_3z=d_3\\
\end{cases}
$$

呈现效果：
$$\begin{cases}
a_1x+b_1y+c_1z=d_1\
a_2x+b_2y+c_2z=d_2\
a_3x+b_3y+c_3z=d_3\
\end{cases}
$$

矩阵

基础

矩阵MD语法规则：

  • 数学公式（包括矩阵）放在$$之间
  • 起始标记\begin{matrix}，结束标记\end{matrix}
  • 行尾标记\\，行间元素用&分隔

示例语法：

$$\begin{matrix}
0.8&0.2\\
0.4&0.6\\
\end{matrix}$$

呈现效果：
$$\begin{matrix}
0.8&0.2\
0.4&0.6\
\end{matrix}$$

矩阵边框

上面的预览没有边框。在起始、结束标记用下列词替换matrix：

  • pmatrix：小括号边框
  • bmatrix：中括号边框
  • Bmatrix：大括号边框
  • vmatrix：单竖线边框
  • Vmatrix：双竖线边框

呈现效果：
$$\begin{bmatrix}
0.8&0.2\
0.4&0.6\
\end{bmatrix}$$

省略元素

当矩阵元素较多且呈现一定规律时会使用省略号：

  • 横省略号：\cdots
  • 竖省略号：\vdots
  • 斜省略号：\ddots

示例：

$$A=\begin{Bmatrix}
{a_{11}}&{a_{12}}&{\cdots}&{a_{1n}}\\
{a_{21}}&{a_{22}}&{\cdots}&{a_{2n}}\\
{\vdots}&{\vdots}&{\ddots}&{\vdots}\\
{a_{m1}}&{a_{m2}}&{\cdots}&{a_{mn}}\\
\end{Bmatrix}$$

呈现效果：
$$A=\begin{Bmatrix}
{a_{11}}&{a_{12}}&{\cdots}&{a_{1n}}\
{a_{21}}&{a_{22}}&{\cdots}&{a_{2n}}\
{\vdots}&{\vdots}&{\ddots}&{\vdots}\
{a_{m1}}&{a_{m2}}&{\cdots}&{a_{mn}}\
\end{Bmatrix}$$

阵列

规则：

  • 包含：起始、结束处以{array}声明
  • 对齐方式：在{array}后以{}逐行统一声明
  • 左对齐：l；居中：c；右对齐：r
  • 竖直线：在声明对齐方式时，插入|建立竖直线
  • 插入水平线：\hline

示例：

$$\begin{array}{c|lll}
{↓}&{a}&{b}&{c}\\
\hline
{R_1}&{c}&{b}&{a}\\
{R_2}&{b}&{c}&{c}\\
\end{array}$$

呈现效果：
$$\begin{array}{c|lll}
{↓}&{a}&{b}&{c}\
\hline
{R_1}&{c}&{b}&{a}\
{R_2}&{b}&{c}&{c}\
\end{array}$$

流程图

横向流程图

复制下面代码时去掉【晕】字，下同：

```mermaid
graph LR
A[方形] -->B(圆角)
B --> C{条件a}
C -->|a=1| D[结果1]
C -->|a=2| E[结果2]
F[横向流程图]
晕```

呈现效果：

graph LR A[方形] -->B(圆角) B --> C{条件a} C -->|a=1| D[结果1] C -->|a=2| E[结果2] F[横向流程图]

竖向流程图

```mermaid
graph TD
A[方形] --> B(圆角)
B --> C{条件a}
C --> |a=1| D[结果1]
C --> |a=2| E[结果2]
F[竖向流程图]
晕```

呈现效果：

graph TD A[方形] --> B(圆角) B --> C{条件a} C --> |a=1| D[结果1] C --> |a=2| E[结果2] F[竖向流程图]

标准流程图

示例：

```mermaid
flowchat
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op
晕```

呈现效果：

flowchat st=>start: 开始框 op=>operation: 处理框 cond=>condition: 判断框(是或否?) sub1=>subroutine: 子流程 io=>inputoutput: 输入输出框 e=>end: 结束框 st->op->cond cond(yes)->io->e cond(no)->sub1(right)->op

UML时序图

示例：

```mermaid
sequenceDiagram
对象A->>对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->>对象A: 我很好(响应)
对象A->>对象B: 你真的好吗？
晕```

呈现效果：

sequenceDiagram 对象A->>对象B: 对象B你好吗?（请求） Note right of 对象B: 对象B的描述 Note left of 对象A: 对象A的描述(提示) 对象B-->>对象A: 我很好(响应) 对象A->>对象B: 你真的好吗？

稍微复杂一点的时序图示例：

```mermaid
sequenceDiagram
Title: 标题：复杂UML时序图
对象A->>对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->>对象A: 我很好(响应)
对象B->>小三: 你好吗
小三-->>对象A: 对象B找我了
对象A->>对象B: 你真的好吗？
Note over 小三,对象B: 我们是朋友
participant C
Note right of C: 没人陪我玩
晕```

呈现效果：

sequenceDiagram Title: 标题：复杂UML时序图 对象A->>对象B: 对象B你好吗?（请求） Note right of 对象B: 对象B的描述 Note left of 对象A: 对象A的描述(提示) 对象B-->>对象A: 我很好(响应) 对象B->>小三: 你好吗 小三-->>对象A: 对象B找我了 对象A->>对象B: 你真的好吗？ Note over 小三,对象B: 我们是朋友 participant C Note right of C: 没人陪我玩

甘特图

示例：

```mermaid
gantt
        dateFormat  YYYY-MM-DD
        title 软件开发甘特图示例
        section 设计
        需求                      :done,    des1, 2023-11-06,2023-11-08
        原型                      :active,  des2, 2023-11-09, 3d
        UI设计                     :         des3, after des2, 5d
    未来任务                     :         des4, after des3, 5d
        section 开发
        学习准备理解需求                      :crit, done, 2023-11-06,24h
        设计框架                             :crit, done, after des2, 2d
        开发                                 :crit, active, 3d
        未来任务                              :crit, 5d
        耍                                   :2d
        section 测试
        功能测试                              :active, a1, after des3, 3d
        压力测试                               :after a1  , 20h
        测试报告                               : 48h
晕```

呈现效果：

gantt dateFormat YYYY-MM-DD title 软件开发甘特图示例 section 设计 需求 :done, des1, 2023-11-06,2023-11-08 原型 :active, des2, 2023-11-09, 3d UI设计 : des3, after des2, 5d 未来任务 : des4, after des3, 5d section 开发 学习准备理解需求 :crit, done, 2023-11-06,24h 设计框架 :crit, done, after des2, 2d 开发 :crit, active, 3d 未来任务 :crit, 5d 耍 :2d section 测试 功能测试 :active, a1, after des3, 3d 压力测试 :after a1 , 20h 测试报告 : 48h

参考

标签：11,MarkDown,效果,--,呈现,甘特图,对象,KaTeX,对齐
From： https://www.cnblogs.com/johnny-wong/p/17984114

相关文章

  • 其他-代码折叠-Markdown-HTML
    亲测有效-兼容性强但是需要代码中间没有空格，其他的语法折叠方法兼容性若容易崩。Codeintfound(inta[],intleft,intright,intx){while(left<right){intmid=(right+left)>>1;if(a[mid]<x)left=mid+1;else......
  • Markdown学习
    标题（#+空格+标题名字一级标题（##+空格+标题名字二级标题（###空格+标题名字三级标题字体加粗斜体加粗斜体划线引用好好学习，天天向上分割线图片超链接百度表格姓名性别年龄小赵男12小刘男13代码#include<iostream>usingna......
  • 学会Markdown从这里开始
    关于MarkdownMarkdown是什么？引用Markdown官方教程的一句话就是：Markdown是一种轻量级的标记语言，允许人们使用易读易写的纯文本格式编写文档。Markdown的优点有哪些？使用markdown编辑可以让我们在写作的过程中顺便对文章进行排版，而不用在需要添加格式的时候中断写作；Markdown可......
  • 在Markdown中使用mermaid画图之流程图
    流程图流程图由流程图方向、节点、节点形状、节点间关系构成声明流程图flowchartLR//flowchart声明为流程图、LR确定流程图从左至右的方向 id1[test1]//id--创建出一个节点、括号内为该节点显示的内容 id2[test2] id3[test3]流程图的方向有以下几种选择：TB-从上到......
  • 如何使用Markdown编写笔记
    Markdown是什么？Markdown是一种轻量级标记语言，创始人为约翰·格鲁伯（JohnGruber）。它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML（或者HTML）文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。由于Markdown的轻量化、易读易写特性，并且对于图片......
  • convert code 2 markdown
    convertcodemarkdown,collectmarkdown,uncollectmarkdown"""convertcodetomarkdown"""importdatetimeimportosimportreclassCodeToMarkDown:"""_summary_"""__slots__=[&q......
  • code2markdown class
    """convertcodetomarkdown"""importosimportrefromdatetimeimportdatetime#需要过滤的文件夹exclude_dirs=["__pycache__","venv","build","dist","node_mo......
  • Markdown的学习
    markdown的基本语法标题三级标题四级标题几级标题前面就用几个#然后空格输入标题名称。最多只支持到6级标题字体倾斜你好给要倾斜的文字左右两边各加一个*就可以。加粗你好给要加粗的文字左右两边各加两个*就完成了。倾斜并且加粗你好给要倾斜并且加粗的文字两边各......
  • MarkDown示例
    这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不......
  • Markdown语法详解
    Markdown学习标题：#空格标题名二级标题字体HelloWorld！两边加一个*变成斜体HelloWordl！两边加两个*变成粗体HelloWordl！两边加~~HelloWordl！两边***斜体粗体引用我是一个很牛逼的程序员>空格分割线三个-或者三个*图片!jietu](C:\Users\王牛逼\Deskto......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99