基础语法
- 通用
-
流程图
- 甘特图
\`\`\`mermaid flowchart LR markdown["`This **is** _Markdown_`"] newLines["`Line1 Line 2 Line 3`"] markdown --> newLines \`\`\`flowchart LR markdown["`This **is** _Markdown_`"] newLines["`Line1 Line 2 Line 3`"] markdown --> newLines- 序列图
\`\`\`mermaid sequenceDiagram participant A as Alice participant J as John A->>J: Hello John, how are you? J->>A: Great! \`\`\`sequenceDiagram participant A as Alice participant J as John A->>J: Hello John, how are you? J->>A: Great!- 类图
\`\`\`mermaid --- title: Bank example --- classDiagram class BankAccount BankAccount : +String owner BankAccount : +Bigdecimal balance BankAccount : +deposit(amount) BankAccount : +withdrawal(amount) \`\`\`--- title: Bank example --- classDiagram class BankAccount BankAccount : +String owner BankAccount : +Bigdecimal balance BankAccount : +deposit(amount) BankAccount : +withdrawal(amount)- 状态图
\`\`\`mermaid --- title: Simple sample --- stateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*] \`\`\`--- title: Simple sample --- stateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]- 关系图
\`\`\`mermaid --- title: Order example --- erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE-ITEM : contains CUSTOMER }|..|{ DELIVERY-ADDRESS : uses \`\`\`--- title: Order example --- erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE-ITEM : contains CUSTOMER }|..|{ DELIVERY-ADDRESS : uses- 旅程图
\`\`\`mermaid journey title My working day section Go to work Make tea: 5: Me Go upstairs: 3: Me Do work: 1: Me, Cat section Go home Go downstairs: 5: Me Sit down: 5: Me \`\`\`journey title My working day section Go to work Make tea: 5: Me Go upstairs: 3: Me Do work: 1: Me, Cat section Go home Go downstairs: 5: Me Sit down: 5: Me- 甘特图
\`\`\`mermaid gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2014-01-01, 30d Another task :after a1, 20d section Another Task in Another :2014-01-12, 12d another task :24d \`\`\`gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2014-01-01, 30d Another task :after a1, 20d section Another Task in Another :2014-01-12, 12d another task :24d- 饼图
\`\`\`mermaid pie title Pets adopted by volunteers "Dogs" : 386 "Cats" : 85 "Rats" : 15 \`\`\`pie title Pets adopted by volunteers "Dogs" : 386 "Cats" : 85 "Rats" : 15其他请参见： https://mermaid.nodejs.cn/syntax/requirementDiagram.html
其他基础语法
gfm
see: gfm
emoji
see: emoji
点个赞 :+1:，踩一下 :-1:，笑脸: :smile:，家庭 :family_man_man_boy_boy:，猫 :cat:，狗 :dog:，汽车 :car:
点个赞 👍，踩一下 👎，笑脸: 😄，家庭 👨👨👦👦，猫 🐱，狗 🐶，汽车 🚗
code
- 如果想全局禁用行号
可以注释modules\content\markdown\remark.ts中"line-numbers"所在行查看效果
- 如果想全局禁用bash commond-line
可以注释modules\content\markdown\remark.ts中"command-line"所在行查看效果
内联code
`const a = 1`
const a = 1
code 默认有行号
\`\`\`js
const a = 1;
console.log(a);
\`\`\`
const a = 1;
console.log(a);
code 无行号
class="no-line-numbers"
\`\`\`js[class=no-line-numbers]
const a = 1;
console.log(a);
\`\`\`
const a = 1;
console.log(a);
bash
如果bash前面有用户信息，则自动隐藏行号
有用户信息，自动隐藏行号
- windows
\`\`\`bash[data-prompt="Cmder C:\Users\haha>" data-output="2-11"]
dir
Directory: C:\Users\Chris
Mode LastWriteTime Length Name
---- ------------- ------ ----
d-r-- 10/14/2015 5:06 PM Contacts
\`\`\`
dir
Directory: C:\Users\Chris
Mode LastWriteTime Length Name
---- ------------- ------ ----
d-r-- 10/14/2015 5:06 PM Contacts
- linux
\`\`\`bash[data-user=haha][data-host=admin][data-output="2,4-8"]
pwd
/usr/home/chris/bin
ls -la
total 2
drwxr-xr-x 2 chris chris 11 Jan 10 16:48 .
drwxr--r-x 45 chris chris 92 Feb 14 11:10 ..
\`\`\`
pwd
/usr/home/chris/bin
ls -la
total 2
drwxr-xr-x 2 chris chris 11 Jan 10 16:48 .
drwxr--r-x 45 chris chris 92 Feb 14 11:10 ..
隐藏用户信息 & 手动隐藏行号
class="no-command-line no-line-numbers"
\`\`\`bash[class="no-command-line no-line-numbers"]
pwd
/usr/home/chris/bin
ls -la
\`\`\`
pwd
/usr/home/chris/bin
ls -la
文件树
\`\`\`treeview
root_folder
├── a first folder
| ├── holidays.mov
| ├── javascript-file.js
| └── some_picture.jpg
├── documents
| ├── spreadsheet.xls
| ├── manual.pdf
| ├── document.docx
| └── presentation.ppt
└── etc.
\`\`\`
root_folder
├── a first folder
| ├── holidays.mov
| ├── javascript-file.js
| └── some_picture.jpg
├── documents
| ├── spreadsheet.xls
| ├── manual.pdf
| ├── document.docx
| └── presentation.ppt
└── etc.
指定行高亮 & 显示文件名
\`\`\`json{2,6,8-10}[我是文件名称.json]
{
"scripts": {
"dev": "nuxt",
"dev": "nuxi dev",
"build": "nuxt build",
"build": "nuxi build",
"start": "nuxt start",
"start": "nuxi preview"
}
}
\`\`\`
{
"scripts": {
"dev": "nuxt",
"dev": "nuxi dev",
"build": "nuxt build",
"build": "nuxi build",
"start": "nuxt start",
"start": "nuxi preview"
}
}
代码diff
\`\`\`diff [class="language-diff-javascript diff-highlight"]
- let foo = bar.baz([1, 2, 3]);
- foo = foo + 1;
+ const foo = bar.baz([1, 2, 3]) + 1;
+ console.log(`foo: ${foo}`);
\`\`\`
- let foo = bar.baz([1, 2, 3]);
- foo = foo + 1;
+ const foo = bar.baz([1, 2, 3]) + 1;
+ console.log(`foo: ${foo}`);
autolinker
请打开modules\content\markdown\remark.ts中"autolinker"所在行的注释查看效果
@font-face {
src: url(http://lea.verou.me/logo.otf);
font-family: 'LeaVerou';
}
data-uri-highlight
div {
border: 40px solid transparent;
border-image: 33.334% url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"> \
<circle cx="5" cy="5" r="5" fill="%23ab4"/><circle cx="15" cy="5" r="5" fill="%23655"/> \
<circle cx="25" cy="5" r="5" fill="%23e07"/><circle cx="5" cy="15" r="5" fill="%23655"/> \
<circle cx="15" cy="15" r="5" fill="hsl(15, 25%, 75%)"/> \
<circle cx="25" cy="15" r="5" fill="%23655"/><circle cx="5" cy="25" r="5" fill="%23fb3"/> \
<circle cx="15" cy="25" r="5" fill="%23655"/><circle cx="25" cy="25" r="5" fill="%2358a"/></svg>');
padding: 1em;
max-width: 20em;
font: 130%/1.6 Baskerville, Palatino, serif;
}
css inline-color
span.foo {
background-color: navy;
color: #BFD;
}
span.bar {
background: rgba(105, 0, 12, .38);
color: hsl(30, 100%, 50%);
border-color: transparent;
}
组件使用说明
code-group
:::code-group
\`\`\`bash[class=no-command-line][filename="use npm"]
npm i create-react-app -g
\`\`\`
\`\`\`bash[class=no-command-line][filename="use create-react-app"]
create-react-app react-debug
\`\`\`
:::
npm i create-react-app -g
create-react-app react-debug
Custom Containers
注意
:::后面有个空格语法和vitepress的一样： https://vitepress.dev/guide/markdown#custom-containers
- 默认（info）
INFO
This is an info box.
I am a title
This is a tip box.
SUCCESS
This is a success box.
DANGER
This is a danger box.
WARNING
🎤 This is a warning box. Sing a song.
Click me to view the code
This is a details block.
button link
- 外链
:button-link[Open Bing]{href="https://cn.bing.com"}
- 站内跳转
:button-link[站内跳转]{href="/"}
list
- 默认 (type=primary)
:::list
- one
- two
- three
:::
one
two
three
- type=info
:::list{type=info}
- one
- two
- three
:::
one
two
three
- type=success
:::list{type=success}
- one
- two
- three
:::
one
two
three
- type=danger
:::list{type=danger}
- one
- two
- three
:::
one
two
three
- type=warning
:::list{type=warning}
- one
- two
- three
:::
one
two
three
- 自定义icon
:::list{icon=🧙🏽♂️}
- one
- two
- three
:::
🧙🏽♂️one
🧙🏽♂️two
🧙🏽♂️three
普通折叠
:::panel{title="我是个折叠按钮，点击我打开内容:"}
- one
- two
- three
:::
我是个折叠面板，点击我打开内容:
- one
- two
- three
panel嵌套组件
点击查看被嵌套的组件:
DANGER
iframe
::embed[]{href=https://tailwindcss.com/}
sandpack demo
:::sand-box{template=react-ts}
\`\`\`js App.tsx
export default function App() {
return (
<div>Hello world</div>
);
}
\`\`\`
:::
youtube
UmkEDc1G_7A 是youtube embed id
需要翻墙
::youtube[Video of a cat in a box]{#UmkEDc1G_7A}