Markdown It 插件
一些强大的 markdown-it 插件。
https://mdit-plugins.github.io/zh/
https://github.com/mdit-plugins/mdit-plugins
@mdit/plugin-abbr
支持缩写词 <abbr> 标签的插件。
安装
bash
yarn add -D @mdit/plugin-abbr配置
ts
// .vitepress/config.mts
import { defineConfig } from 'vitepress';
import { abbr } from "@mdit/plugin-abbr";
export default defineConfig({
markdown: {
config: (md) => {
md.use(abbr);
},
},
});使用
markdown
*[缩略词]: 内容
*[HTML]: Hyper Text Markup Language
*[W3C]: World Wide Web Consortium
The HTML specificationis maintained by the W3C.The HTML specificationis maintained by the W3C.
@mdit/plugin-align
支持 GFM 风格的警告语法。
安装
bash
yarn add -D @mdit/plugin-align配置
ts
// .vitepress/config.mts
import { defineConfig } from 'vitepress';
import { align } from "@mdit/plugin-align";
export default defineConfig({
markdown: {
config: (md) => {
md.use(align);
},
},
});使用
markdown
::: left
左对齐的内容
:::
::: center
居中的内容
:::
::: right
右对齐的内容
:::
::: justify
两端对齐的内容
:::左对齐的内容
居中的内容
右对齐的内容
两端对齐的内容
@mdit/plugin-dl
支持定义列表的插件。
安装
bash
yarn add -D @mdit/plugin-dl配置
ts
// .vitepress/config.mts
import { defineConfig } from 'vitepress';
import { dl } from "@mdit/plugin-dl";
export default defineConfig({
markdown: {
config: (md) => {
md.use(dl);
},
},
});使用
markdown
术语 1
: 定义 1
术语 2 with _inline markup_
: 定义 2
定义 2 有多个段落。
- 列表 1
- 列表 2
术语 3
: 定义 3
包含软换行
定义的第二个段落。
---
术语 1
: 定义 1
术语 2
: 定义 2a
: 定义 2b- 术语 1
定义 1
- 术语 2 with inline markup
定义 2
定义 2 有多个段落。
- 列表 1
- 列表 2
- 术语 3
定义 3 包含软换行
定义的第二个段落。
- 术语 1
- 定义 1
- 术语 2
- 定义 2a
- 定义 2b
@mdit/plugin-embed
在 Markdown 中嵌入外部内容的插件。
安装
bash
yarn add -D markdown-it
yarn add -D @mdit/plugin-embed配置
ts
// .vitepress/config.mts
import { defineConfig } from 'vitepress';
import { embed } from "@mdit/plugin-embed";
export default defineConfig({
markdown: {
config: (md) => {
md.use(embed, {
config: [
{
name: "bilibili",
setup: (bvid) => {
const bilibili = `https://player.bilibili.com/player.html?bvid=${bvid}`;
const className = "mdit-embed-bilibili";
return `<iframe class="${className}" src="${bilibili}" allowfullscreen="true"></iframe>`;
},
},
],
});
},
},
});css
/* .vitepress/theme/style.css */
.mdit-embed-bilibili {
display: block;
width: 100%;
height: 400px;
border: 1px solid var(--vp-code-block-divider-color);
border-radius: 8px;
padding: 4px;
background-color: var(--vp-code-block-bg);
}使用
markdown
{% bilibili BV1nrSgY8EaP %}@mdit/plugin-figure
生成带有标题的图片插件。
安装
bash
yarn add -D @mdit/plugin-figure配置
ts
// .vitepress/config.mts
import { defineConfig } from 'vitepress';
import { figure } from "@mdit/plugin-figure";
export default defineConfig({
markdown: {
config: (md) => {
md.use(figure, { focusable: true });
},
},
});使用
markdown
@mdit/plugin-footnote
支持页脚的插件。
安装
bash
yarn add -D @mdit/plugin-footnote配置
ts
// .vitepress/config.mts
import { defineConfig } from 'vitepress';
import { footnote } from "@mdit/plugin-footnote";
export default defineConfig({
markdown: {
config: (md) => {
md.use(footnote);
},
},
});使用
markdown
脚注 1 链接[^first]。
脚注 2 链接[^second]。
行内的脚注^[行内脚注文本] 定义。
重复的页脚定义[^second]。
[^first]: 脚注 **可以包含特殊标记**
也可以由多个段落组成
[^second]: 脚注文字。脚注 1 链接[1]。
脚注 2 链接[2]。
行内的脚注[3] 定义。
重复的页脚定义[2:1]。
@mdit/plugin-icon
支持图标的插件。
安装
bash
yarn add -D @mdit/plugin-icon
yarn add -D @fortawesome/fontawesome-free@6.7.2配置
ts
// .vitepress/config.mts
import { defineConfig } from 'vitepress';
import { icon } from "@mdit/plugin-icon";
export default defineConfig({
markdown: {
config: (md) => {
md.use(icon, { render: fontawesomeRender });
},
},
});ts
// .vitepress/theme/index.ts
import type { Theme } from 'vitepress';
import DefaultTheme from 'vitepress/theme';
import '@fortawesome/fontawesome-free/css/all.min.css'; 使用
markdown
iPhone 是由 ::fa-brands fa-apple =20 /green:: 制造的。iPhone 是由 制造的。
@mdit/plugin-img-size
支持设置图片尺寸的插件。
安装
bash
yarn add -D @mdit/plugin-img-size配置
ts
// .vitepress/config.mts
import { defineConfig } from 'vitepress';
import { imgSize } from "@mdit/plugin-img-size";
export default defineConfig({
markdown: {
config: (md) => {
md.use(imgSize);
},
},
});使用
markdown
@mdit/plugin-ins
添加 ins 标签支持的插件。
安装
bash
yarn add -D @mdit/plugin-ins配置
ts
// .vitepress/config.mts
import { defineConfig } from 'vitepress';
import { ins } from "@mdit/plugin-ins";
export default defineConfig({
markdown: {
config: (md) => {
md.use(ins);
},
},
});使用
markdown
Markdown it ++十分++ 强大。Markdown it 十分 强大。
@mdit/plugin-mark
用于标记和突出显示内容的插件。
安装
bash
yarn add -D @mdit/plugin-mark配置
ts
// .vitepress/config.mts
import { defineConfig } from 'vitepress';
import { mark } from "@mdit/plugin-mark";
export default defineConfig({
markdown: {
config: (md) => {
md.use(mark);
},
},
});使用
markdown
Markdown it ==十分== 强大。Markdown it 十分 强大。
@mdit/plugin-sub
提供下角标支持的插件。
安装
bash
yarn add -D @mdit/plugin-sub配置
ts
// .vitepress/config.mts
import { defineConfig } from 'vitepress';
import { sub } from "@mdit/plugin-sub";
export default defineConfig({
markdown: {
config: (md) => {
md.use(sub);
},
},
});使用
H~2~O H2O
@mdit/plugin-sup
提供上角标支持的插件。
安装
bash
yarn add -D @mdit/plugin-sup配置
ts
// .vitepress/config.mts
import { defineConfig } from 'vitepress';
import { sup } from "@mdit/plugin-sup";
export default defineConfig({
markdown: {
config: (md) => {
md.use(sup);
},
},
});使用
19^th^ 19th
@mdit/plugin-tasklist
提供任务列表支持的插件。
安装
bash
yarn add -D @mdit/plugin-tasklist配置
ts
// .vitepress/config.mts
import { defineConfig } from 'vitepress';
import { tasklist } from "@mdit/plugin-tasklist";
export default defineConfig({
markdown: {
config: (md) => {
md.use(tasklist);
},
},
});使用
markdown
- [ ] 计划 A
- [x] 计划 B
1. [ ] 计划 A
2. [x] 计划 B