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

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

时间:2024-08-21 17:31:25浏览次数:12  
标签:MarkDown end 效果 -- 呈现 甘特图 对象 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使用KaTeXMathJax来渲染数学表达式。KaTeX比MathJax性能更好,但却缺少很多MathJax拥有的特性。

两种公式编写方式:

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

常用符号

叉乘:$A\times B$,呈现效果:$A\times B$
点乘:$A\dot B$,呈现效果:$A\cdot B$
小括号:$(1,2)$,呈现效果:$(1,2)$
中括号:$[1,2]$,呈现效果:$[1,2]$
大括号:$\{1,2\}$,呈现效果:${1,2}$
下标:$a_{11}$,呈现效果:$a_{11}$
上标:$a^{12}$,呈现效果:$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$$

呈现效果:
$$(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

参考

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

相关文章

  • Markdown书写规范
    书写规范MD001-Headinglevelsshouldonlyincrementbyonelevelatati-Me标题级数只能每次扩大一个,也就是说不能隔级创建标题,必须h1-h2-h3…这样MD002-Firstheadingshouldbeatoplevelheading文档的第一个标题必须是最高级的标题,也就是h1MD003-Head......
  • 在 markdown 中运行代码片段
    本篇文章将分享一种可以在markdown中运行代码片段的方案达到的效果实施步骤安装VsCode和MarkdownPriviewEnhanced插件从VisualStudioCode这里下载安装Vscode从Vscode中安装MarkdownPriviewEnhanced插件将MarkdownPriviewEnhanced插件设置中的Ena......
  • ace markdown editor 原生web components
    src/index.html:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document&......
  • 学习 node.js 六 Markdown 转为 html,zlib
    目录Markdown转为html安装ejs语法标签含义 1.纯文本标签2.输出经过HTML转义的内容3.输出非转义的内容(原始内容)markedbrowserSynczlibgzipdeflategzip和deflate区别http请求压缩 Markdown转为html什么是markdown?Markdown是一种轻量级标记......
  • lit ace markdown编辑器
    src/components/AcrMarkdown.ts:import{LitElement,css,html}from"lit";import{customElement,property,query}from"lit/decorators.js";importacefrom"ace-builds/src-min-noconflict/ace.js";import{marked}from&q......
  • Markdown丝滑体验——搭建图床
    Markdown丝滑体验——搭建图床在多个平台发布markdown时,时常要带着图片跑这跑那,十分麻烦。为了解决这个问题,得到更丝滑的体验,我们可以搭建自己图床。参考教程四分钟教你搭建高速免费稳定图床,Gitee+PicGo完美搭配,获得Markdown写作丝滑体验!_哔哩哔哩_bilibiliGitee创建图......
  • Markdown语法
    Markdown语法参考8分钟让你快速掌握Markdown_哔哩哔哩_bilibiliMarkdown基本语法|Markdown官方教程标题#标题一##标题二###标题三####标题四#####标题五######标题六快捷键CTRL+数字引用>这是一段引用这是一段引用列表有序列表1.one2......
  • Coze插件发布!PDF转Markdown功能便捷集成,打造你的专属智能体
    近日,TextIn开发的PDF转Markdown插件正式上架Coze平台。在扣子搜索“pdf转markdown”,或在Coze平台搜索“pdf2markdown”,即可找到插件,在你的专属智能体中便捷使用文档解析功能。如果想测试解析插件在你需要的场景下表现如何,可以直接对话bot,试用pdf转markdown效果。同时,TextIn......
  • Markdown学习
    标题这是一个二级标题##这是一个二级标题这是一个三级标题###这是一个三级标题字体这是一段普通文本这是一段粗体文本**这是一段粗体文本**这是一段斜体文本*这是一段斜体文本*这是一段粗体且斜体文本***这是一段粗体且斜体文本***这段文本应用了删除线~~这......
  • IDEA弹出JAVA_HOME异常,Markdown插件无法预览
    IDEA异常,theemvironmentvariableJAVA_HOMEdosenotpointtoavalidjvminstalltion.  markdown插件无法预览这个问题困扰了我很久,网上搜了一圈也没得到解决。问题IDEA每当打开新一个项目或是使用某些IDEA插件时就会弹出这个报错的窗口,还关不掉项目正常运行,但是ID......