mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-23 10:58:13 +08:00
feat!: use new chart plugin and remove md-enhance (#621)
This commit is contained in:
pengzhanbo
GitHub
parent
6ef3db166a
commit
338334f479
@ -1,6 +1,9 @@
|
||||
name: Deploy Example Layout Slots
|
||||
|
||||
on:
|
||||
push:
|
||||
tags:
|
||||
- v*
|
||||
workflow_dispatch:
|
||||
|
||||
jobs:
|
||||
|
||||
@ -40,9 +40,7 @@
|
||||
},
|
||||
"plume-deps": {
|
||||
"vuepress": "2.0.0-rc.23",
|
||||
"vue": "^3.5.16",
|
||||
"sass-embedded": "^1.89.1",
|
||||
"sass-loader": "^16.0.5",
|
||||
"vue": "^3.5.17",
|
||||
"http-server": "^14.1.1",
|
||||
"typescript": "^5.8.3"
|
||||
}
|
||||
|
||||
@ -76,12 +76,6 @@ export async function createPackageJson(
|
||||
if (!hasDep('vue'))
|
||||
deps.push('vue')
|
||||
|
||||
if (bundler === 'webpack' && !hasDep('sass-loader'))
|
||||
deps.push('sass-loader')
|
||||
|
||||
if (!hasDep('sass-embedded'))
|
||||
deps.push('sass-embedded')
|
||||
|
||||
if (useTs)
|
||||
deps.push('typescript')
|
||||
|
||||
|
||||
@ -1,59 +1,12 @@
|
||||
import type { ClientConfig } from 'vuepress/client'
|
||||
import { defineMermaidConfig } from '@vuepress/plugin-markdown-chart/client'
|
||||
import { h } from 'vue'
|
||||
import { defineMermaidConfig } from 'vuepress-plugin-md-enhance/client'
|
||||
import { Layout } from 'vuepress-theme-plume/client'
|
||||
import { defineClientConfig } from 'vuepress/client'
|
||||
import AsideNav from '~/components/AsideNav.vue'
|
||||
import { setupThemeColors } from '~/composables/theme-colors.js'
|
||||
|
||||
defineMermaidConfig({
|
||||
theme: 'default',
|
||||
themeVariables: isDarkMode => ({
|
||||
dark: isDarkMode,
|
||||
background: isDarkMode ? '#1e1e1e' : '#fff',
|
||||
|
||||
primaryColor: isDarkMode ? '#c8abfa' : '#6f42c1',
|
||||
primaryBorderColor: isDarkMode ? '#669' : '#99c',
|
||||
primaryTextColor: isDarkMode ? '#c8abfa' : '#6f42c1',
|
||||
|
||||
secondaryColor: '#ffb500',
|
||||
secondaryBorderColor: isDarkMode ? '#fff' : '#000',
|
||||
secondaryTextColor: isDarkMode ? '#ddd' : '#333',
|
||||
|
||||
tertiaryColor: isDarkMode ? '#282828' : '#efeef4',
|
||||
tertiaryBorderColor: isDarkMode ? '#bbb' : '#242424',
|
||||
tertiaryTextColor: isDarkMode ? '#ddd' : '#333',
|
||||
|
||||
// Note
|
||||
noteBkgColor: isDarkMode ? '#c96' : '#fff5ad',
|
||||
noteTextColor: '#242424',
|
||||
noteBorderColor: isDarkMode ? '#c86' : '#333',
|
||||
|
||||
lineColor: isDarkMode ? '#d3d3d3' : '#333',
|
||||
textColor: isDarkMode ? '#d3d3d3' : '#242424',
|
||||
|
||||
mainBkg: isDarkMode ? 'rgb(159 122 234 / 0.16)' : 'rgb(159 122 234 / 0.14)',
|
||||
errorBkgColor: '#eb4d5d',
|
||||
errorTextColor: '#fff',
|
||||
|
||||
// Flowchart
|
||||
nodeBorder: isDarkMode ? '#669' : '#99c',
|
||||
nodeTextColor: isDarkMode ? '#c8abfa' : '#6f42c1',
|
||||
edgeLabelBackground: isDarkMode ? '#333' : '#ddd',
|
||||
|
||||
// Sequence
|
||||
signalTextColor: isDarkMode ? '#9e9e9e' : '#242424',
|
||||
|
||||
// Class
|
||||
classText: '#fff',
|
||||
|
||||
// State
|
||||
labelColor: '#fff',
|
||||
|
||||
attributeBackgroundColorEven: isDarkMode ? '#0d1117' : '#fff',
|
||||
attributeBackgroundColorOdd: isDarkMode ? '#161b22' : '#f8f8f8',
|
||||
|
||||
}),
|
||||
class: {
|
||||
hideEmptyMembersBox: true,
|
||||
},
|
||||
|
||||
@ -85,7 +85,6 @@ export const themeGuide: ThemeNote = defineNoteConfig({
|
||||
'jsFiddle',
|
||||
'codeSandbox',
|
||||
'replit',
|
||||
'frontend-deprecated',
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@ -18,7 +18,6 @@ export const theme: Theme = plumeTheme({
|
||||
},
|
||||
|
||||
markdown: {
|
||||
oldDemo: true,
|
||||
chartjs: true,
|
||||
echarts: true,
|
||||
markmap: true,
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
title: 1.0.0-rc.144 更新说明
|
||||
createTime: 2025/04/28 11:33:49
|
||||
permalink: /article/f1khd14n/
|
||||
sticky: 3
|
||||
tags:
|
||||
- 破坏性更新
|
||||
---
|
||||
|
||||
84
docs/3.更新说明/154.md
Normal file
84
docs/3.更新说明/154.md
Normal file
@ -0,0 +1,84 @@
|
||||
---
|
||||
title: 1.0.0-rc.154 更新说明
|
||||
createTime: 2025/06/19 18:10:18
|
||||
permalink: /article/yw0dmwcm/
|
||||
sticky: true
|
||||
tags:
|
||||
- 破坏性更新
|
||||
---
|
||||
|
||||
**在本次更新中，主题移除了 `vuepress-plugin-md-enhance` 插件。**
|
||||
|
||||
由该插件提供支持的 图表 `Chartjs` `ECharts` `mermaid` `flowchart` `plantuml` 功能，迁移到
|
||||
`@vuepress/plugin-markdown-chart` 插件。
|
||||
|
||||
因此主题也同步完成了插件的迁移。
|
||||
|
||||
至此，在主题中，由 `vuepress-plugin-md-enhance` 插件提供的相关功能，已全部迁移至官方 `vuepress/ecosystem`
|
||||
仓库的相关插件。因此主题将从 `1.0.0-rc.154` 开始，安全的移除 `vuepress-plugin-md-enhance` 插件。
|
||||
|
||||
受此影响，如果你在 `.vuepress/client.ts` 中，有使用从 `vuepress-plugin-md-enhance` 导入的功能：
|
||||
|
||||
```ts title=".vuepress/client.ts"
|
||||
import { defineMermaidConfig } from 'vuepress-plugin-md-enhance/client'
|
||||
|
||||
defineMermaidConfig({
|
||||
theme: 'dark'
|
||||
})
|
||||
```
|
||||
|
||||
需要进行修改：
|
||||
|
||||
```ts title=".vuepress/client.ts"
|
||||
import { defineMermaidConfig } from '@vuepress/plugin-markdown-chart/client' // [!code ++]
|
||||
import { defineMermaidConfig } from 'vuepress-plugin-md-enhance/client' // [!code --]
|
||||
|
||||
defineMermaidConfig({
|
||||
theme: 'dark'
|
||||
})
|
||||
```
|
||||
|
||||
如果您有在 `.vuepress/config.ts` 的主题配置中，使用 `plugins.mdEnhance` 配置，需要进行修改:
|
||||
|
||||
```ts title=".vuepress/config.ts"
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
import { plumeTheme } from 'vuepress-theme-plume'
|
||||
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
mdEnhance: {
|
||||
mermaid: true,
|
||||
chartjs: true,
|
||||
// ...
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
需要进行修改:
|
||||
|
||||
```ts title=".vuepress/config.ts"
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
import { plumeTheme } from 'vuepress-theme-plume'
|
||||
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
mdEnhance: { // [!code --:5]
|
||||
mermaid: true,
|
||||
chartjs: true,
|
||||
// ...
|
||||
}
|
||||
},
|
||||
markdown: { // [!code ++:5]
|
||||
mermaid: true,
|
||||
chartjs: true,
|
||||
// ...
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
**如果您在使用过程中遇到问题，请在 [GitHub Issue](https://github.com/pengzhanbo/vuepress-theme-plume/issues) 上反馈。**
|
||||
@ -2,8 +2,17 @@
|
||||
title: Markdown Enhance
|
||||
createTime: 2024/03/06 20:25:36
|
||||
permalink: /config/plugins/markdown-enhance/
|
||||
badge:
|
||||
type: danger
|
||||
text: 弃用
|
||||
---
|
||||
|
||||
::: danger 从 `1.0.0-rc.154` 开始，该插件已从主题中移除
|
||||
[vuepress-plugin-md-enhance](https://plugin-md-enhance.vuejs.press/zh/) 提供的，在主题中明确受到支持
|
||||
的功能，已迁移到 `vuepress/ecosystem` 仓库的其他插件中，因此，主题将从 `1.0.0-rc.154` 开始，安全的
|
||||
移除 `vuepress-plugin-md-enhance` 插件。
|
||||
:::
|
||||
|
||||
## 概述
|
||||
|
||||
提供 Markdown 增强功能。
|
||||
@ -21,10 +30,6 @@ export default defineUserConfig({
|
||||
markdown: {
|
||||
// 以下可选项在 主题中默认不启用，
|
||||
// 请在主题中自行配置
|
||||
// chartjs: true, // 图表支持
|
||||
// echarts: true, // ECharts 图表支持
|
||||
// flowchart: true, // 流程图支持
|
||||
// markmap: true, // Markmap 图表支持
|
||||
// stylize: true, // 对行内语法进行样式化以创建代码片段
|
||||
// playground: true, // 交互演示
|
||||
// kotlinPlayground: true, // Kotlin 交互演示
|
||||
@ -38,23 +43,3 @@ export default defineUserConfig({
|
||||
## 配置
|
||||
|
||||
详见 [vuepress-plugin-md-enhance](https://plugin-md-enhance.vuejs.press/zh/config.html)
|
||||
|
||||
:::tip 说明
|
||||
主题还未完全对 该插件提供的 所有 增强功能 进行 样式上的适配。
|
||||
如果你在使用过程中遇到样式上的问题，可以在 [issue](https://github.com/pengzhanbo/vuepress-theme-plume/issues) 里提出。
|
||||
:::
|
||||
|
||||
::: warning
|
||||
该插件从 `2.0.0-rc.53` 开始，移除了部分功能。主题从 `1.0.0-rc.103` 版本开始，适配至最新版。
|
||||
由此带来的影响是，`plugins.mdEnhance` 中 `imgSize`/`imgLazyload`/`imgMark`/`figure`/`obsidianImgSize`/`katex`/`mathjax`/`tabs`/`code-tabs`/`hint`/`alerts`弃用。
|
||||
|
||||
- `imgSize`/`imgLazyload`/`imgMark`/`figure`/`obsidianImgSize` 所实现的功能，您可以使用 `plugins.markdownImage` 重新进行配置。
|
||||
- `katex` / `mathjax` 所实现的功能，您可以使用 `plugins.markdownMath` 进行配置。
|
||||
- `tabs` / `code-tabs` / `hint` / `alerts` 已变更为 主题的内置功能，您无需额外的配置。
|
||||
:::
|
||||
|
||||
::: warning
|
||||
该插件在 `2.0.0-rc.60` 版本中，移除了 `include` 选项。主题从 `1.0.0-rc.120` 版本开始，适配至最新版。
|
||||
由此带来的影响是，使用 `@vuepress/plugin-markdown-include` 插件实现相同的功能，请使用 `plugins.markdownInclude`
|
||||
进行配置。
|
||||
:::
|
||||
|
||||
@ -11,7 +11,7 @@ permalink: /guide/chart/chartjs/
|
||||
|
||||
主题支持在 文章中 嵌入由 [chart.js] 图表。
|
||||
|
||||
该功能由 [vuepress-plugin-md-enhance](https://plugin-md-enhance.vuejs.press/) 提供支持。
|
||||
该功能由 [@vuepress/plugin-markdown-chart](https://ecosystem.vuejs.press/plugins/markdown/markdown-chart/) 提供支持。
|
||||
|
||||
## 配置
|
||||
|
||||
@ -56,8 +56,8 @@ export default defineUserConfig({
|
||||
## 示例
|
||||
|
||||
::: note
|
||||
示例 Fork 自 [vuepress-theme-hope](https://theme-hope.vuejs.press/zh/guide/markdown/chart/chartjs.html#%E6%A1%88%E4%BE%8B),
|
||||
遵循 [MIT](https://github.com/vuepress-theme-hope/vuepress-theme-hope/blob/main/LICENSE) 许可证。
|
||||
示例 Fork 自 [@vuepress/plugin-markdown-chart](https://ecosystem.vuejs.press/plugins/markdown/markdown-chart/chartjs.html),
|
||||
遵循 [MIT](https://github.com/vuepress/ecosystem/blob/main/LICENSE) 许可证。
|
||||
:::
|
||||
|
||||
### 块状图
|
||||
|
||||
@ -9,7 +9,7 @@ permalink: /guide/chart/echarts/
|
||||
|
||||
主题支持在文章中嵌入 [ECharts](https://echarts.apache.org/zh/index.html) 图表。
|
||||
|
||||
该功能由 [vuepress-plugin-md-enhance](https://plugin-md-enhance.vuejs.press/) 提供支持。
|
||||
该功能由 [@vuepress/plugin-markdown-chart](https://ecosystem.vuejs.press/plugins/markdown/markdown-chart/) 提供支持。
|
||||
|
||||
## 配置
|
||||
|
||||
@ -38,8 +38,8 @@ export default defineUserConfig({
|
||||
```
|
||||
|
||||
::: note
|
||||
以下文档 Fork 自 [vuepress-theme-hope](https://theme-hope.vuejs.press/zh/guide/markdown/chart/echarts.html),
|
||||
遵循 [MIT](https://github.com/vuepress-theme-hope/vuepress-theme-hope/blob/main/LICENSE) 许可证。
|
||||
以下文档 Fork 自 [@vuepress/plugin-markdown-chart](https://ecosystem.vuejs.press/plugins/markdown/markdown-chart/echarts.html),
|
||||
遵循 [MIT](https://github.com/vuepress/ecosystem/blob/main/LICENSE) 许可证。
|
||||
:::
|
||||
|
||||
## 语法
|
||||
|
||||
@ -9,7 +9,7 @@ permalink: /guide/chart/flowchart/
|
||||
|
||||
主题支持在 文章中 嵌入由 [flowchart](http://flowchart.js.org/) 。
|
||||
|
||||
该功能由 [vuepress-plugin-md-enhance](https://plugin-md-enhance.vuejs.press/) 提供支持。
|
||||
该功能由 [@vuepress/plugin-markdown-chart](https://ecosystem.vuejs.press/plugins/markdown/markdown-chart/) 提供支持。
|
||||
|
||||
## 配置
|
||||
|
||||
@ -38,8 +38,8 @@ export default defineUserConfig({
|
||||
```
|
||||
|
||||
::: note
|
||||
以下文档 Fork 自 [vuepress-theme-hope](https://theme-hope.vuejs.press/zh/guide/markdown/chart/flowchart.html),
|
||||
遵循 [MIT](https://github.com/vuepress-theme-hope/vuepress-theme-hope/blob/main/LICENSE) 许可证。
|
||||
以下文档 Fork 自 [@vuepress/plugin-markdown-chart](https://ecosystem.vuejs.press/plugins/markdown/markdown-chart/flowchart.html),
|
||||
遵循 [MIT](https://github.com/vuepress/ecosystem/blob/main/LICENSE) 许可证。
|
||||
:::
|
||||
|
||||
## 语法
|
||||
@ -61,8 +61,9 @@ export default defineUserConfig({
|
||||
|
||||
## 演示
|
||||
|
||||
::: md-demo Vue 主题
|
||||
::: demo markdown title="Vue 主题"
|
||||
|
||||
````md
|
||||
```flow
|
||||
st=>start: 开始|past:>http://www.google.com[blank]
|
||||
e=>end: 结束|future:>http://www.google.com
|
||||
@ -79,11 +80,13 @@ cond(no)->sub1(left)->op1
|
||||
c2(yes)->io->e
|
||||
c2(no)->op2->e
|
||||
```
|
||||
````
|
||||
|
||||
:::
|
||||
|
||||
::: md-demo Ant 主题
|
||||
::: demo markdown title="Ant 主题"
|
||||
|
||||
````md
|
||||
```flow:ant
|
||||
st=>start: 开始|past:>http://www.google.com[blank]
|
||||
e=>end: 结束|future:>http://www.google.com
|
||||
@ -100,11 +103,13 @@ cond(no)->sub1(left)->op1
|
||||
c2(yes)->io->e
|
||||
c2(no)->op2->e
|
||||
```
|
||||
````
|
||||
|
||||
:::
|
||||
|
||||
::: md-demo Pie 主题
|
||||
::: demo markdown title="Pie 主题"
|
||||
|
||||
````md
|
||||
```flow:pie
|
||||
st=>start: 开始|past:>http://www.google.com[blank]
|
||||
e=>end: 结束|future:>http://www.google.com
|
||||
@ -121,6 +126,7 @@ cond(no)->sub1(left)->op1
|
||||
c2(yes)->io->e
|
||||
c2(no)->op2->e
|
||||
```
|
||||
````
|
||||
|
||||
:::
|
||||
|
||||
@ -142,14 +148,16 @@ c2(no)->op2->e
|
||||
被用于流程结束的最后一个节点。
|
||||
默认文字为 `End`.
|
||||
|
||||
::: md-demo 开始 & 结束
|
||||
::: demo markdown title="开始 & 结束"
|
||||
|
||||
````md
|
||||
```flow
|
||||
st=>start: 开始
|
||||
e=>end: 结束
|
||||
|
||||
st->e
|
||||
```
|
||||
````
|
||||
|
||||
:::
|
||||
|
||||
@ -157,14 +165,16 @@ st->e
|
||||
|
||||
`[Variable]->operation: [Text]`
|
||||
|
||||
::: md-demo 操作
|
||||
::: demo markdown title="操作"
|
||||
|
||||
````md
|
||||
```flow
|
||||
process=>operation: 操作
|
||||
e=>end: 结束
|
||||
|
||||
process->e
|
||||
```
|
||||
````
|
||||
|
||||
:::
|
||||
|
||||
@ -172,14 +182,16 @@ process->e
|
||||
|
||||
`[Variable]->inputoutput: [Text]`
|
||||
|
||||
::: md-demo 输入输出
|
||||
:::demo markdown title="输入输出"
|
||||
|
||||
````md
|
||||
```flow
|
||||
process=>inputoutput: 输入输出
|
||||
e=>end: 结束
|
||||
|
||||
process->e
|
||||
```
|
||||
````
|
||||
|
||||
:::
|
||||
|
||||
@ -187,14 +199,16 @@ process->e
|
||||
|
||||
`[Variable]->subroutine: [Text]`
|
||||
|
||||
::: md-demo 子程序
|
||||
::: demo markdown title="子程序"
|
||||
|
||||
````md
|
||||
```flow
|
||||
process=>subroutine: 子程序
|
||||
e=>end: 结束
|
||||
|
||||
process->e
|
||||
```
|
||||
````
|
||||
|
||||
:::
|
||||
|
||||
@ -205,8 +219,9 @@ process->e
|
||||
- `[Variable]([yesText])->[Position]`
|
||||
- `[Variable]([noText])->[Position]`
|
||||
|
||||
::: md-demo 条件
|
||||
::: demo markdown title="条件"
|
||||
|
||||
````md
|
||||
```flow
|
||||
cond=>condition: 是否执行操作?
|
||||
process=>operation: 操作
|
||||
@ -215,6 +230,7 @@ e=>end: 结束
|
||||
cond(yes)->process->e
|
||||
cond(no)->e
|
||||
```
|
||||
````
|
||||
|
||||
:::
|
||||
|
||||
@ -226,8 +242,9 @@ cond(no)->e
|
||||
- `[Variable](path1, direction)->[Position]`
|
||||
- `[Variable](path1, direction)->[Position]`
|
||||
|
||||
::: md-demo 平行
|
||||
::: demo markdown title="平行"
|
||||
|
||||
````md
|
||||
```flow
|
||||
para=>parallel: 平行任务
|
||||
process=>operation: 操作
|
||||
@ -236,6 +253,7 @@ e=>end: 结束
|
||||
para(path1, bottom)->process->e
|
||||
para(path2)->e
|
||||
```
|
||||
````
|
||||
|
||||
:::
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ permalink: /guide/chart/markmap/
|
||||
|
||||
主题支持在 文章中 嵌入由 [markmap](https://markmap.js.org/) 。
|
||||
|
||||
该功能由 [vuepress-plugin-md-enhance](https://plugin-md-enhance.vuejs.press/) 提供支持。
|
||||
该功能由 [@vuepress/plugin-markdown-chart](https://ecosystem.vuejs.press/plugins/markdown/markdown-chart/) 提供支持。
|
||||
|
||||
## 配置
|
||||
|
||||
@ -38,8 +38,8 @@ export default defineUserConfig({
|
||||
```
|
||||
|
||||
::: note
|
||||
以下文档 Fork 自 [vuepress-theme-hope](https://theme-hope.vuejs.press/zh/guide/markdown/chart/markmap.html),
|
||||
遵循 [MIT](https://github.com/vuepress-theme-hope/vuepress-theme-hope/blob/main/LICENSE) 许可证。
|
||||
以下文档 Fork 自 [@vuepress/plugin-markdown-chart](https://ecosystem.vuejs.press/plugins/markdown/markdown-chart/markmap.html),
|
||||
遵循 [MIT](https://github.com/vuepress/ecosystem/blob/main/LICENSE) 许可证。
|
||||
:::
|
||||
|
||||
## 语法
|
||||
|
||||
@ -9,7 +9,7 @@ permalink: /guide/chart/mermaid/
|
||||
|
||||
主题支持在 文章中 嵌入由 [Mermaid](https://mermaid.js.org/) 。
|
||||
|
||||
该功能由 [vuepress-plugin-md-enhance](https://plugin-md-enhance.vuejs.press/) 提供支持。
|
||||
该功能由 [@vuepress/plugin-markdown-chart](https://ecosystem.vuejs.press/plugins/markdown/markdown-chart/) 提供支持。
|
||||
|
||||
## 配置
|
||||
|
||||
@ -38,8 +38,8 @@ export default defineUserConfig({
|
||||
```
|
||||
|
||||
::: note
|
||||
以下文档 Fork 自 [vuepress-theme-hope](https://theme-hope.vuejs.press/zh/guide/markdown/chart/mermaid.html),
|
||||
遵循 [MIT](https://github.com/vuepress-theme-hope/vuepress-theme-hope/blob/main/LICENSE) 许可证。
|
||||
以下文档 Fork 自 [@vuepress/plugin-markdown-chart](https://ecosystem.vuejs.press/plugins/markdown/markdown-chart/mermaid.html),
|
||||
遵循 [MIT](https://github.com/vuepress/ecosystem/blob/main/LICENSE) 许可证。
|
||||
:::
|
||||
|
||||
## 语法
|
||||
|
||||
@ -2,14 +2,14 @@
|
||||
title: PlantUML
|
||||
icon: arcticons:uml-class-editor
|
||||
createTime: 2025/03/01 15:02:08
|
||||
permalink: /guide/za6z9xie/
|
||||
permalink: /guide/chart/plantuml/
|
||||
---
|
||||
|
||||
## 概述
|
||||
|
||||
主题支持在 文章中 嵌入由 [PlantUML](https://plantuml.com/) 。
|
||||
|
||||
该功能由 [vuepress-plugin-md-enhance](https://plugin-md-enhance.vuejs.press/) 提供支持。
|
||||
该功能由 [@vuepress/plugin-markdown-chart](https://ecosystem.vuejs.press/plugins/markdown/markdown-chart/) 提供支持。
|
||||
|
||||
## 配置
|
||||
|
||||
@ -28,8 +28,8 @@ export default defineUserConfig({
|
||||
```
|
||||
|
||||
::: note
|
||||
以下文档 Fork 自 [vuepress-theme-hope](https://theme-hope.vuejs.press/zh/guide/markdown/chart/plantuml.html),
|
||||
遵循 [MIT](https://github.com/vuepress-theme-hope/vuepress-theme-hope/blob/main/LICENSE) 许可证。
|
||||
以下文档 Fork 自 [@vuepress/plugin-markdown-chart](https://ecosystem.vuejs.press/plugins/markdown/markdown-chart/plantuml.html),
|
||||
遵循 [MIT](https://github.com/vuepress/ecosystem/blob/main/LICENSE) 许可证。
|
||||
:::
|
||||
|
||||
## 格式
|
||||
|
||||
@ -5,7 +5,7 @@ createTime: 2025/01/08 21:34:26
|
||||
permalink: /guide/repl/frontend/
|
||||
---
|
||||
|
||||
::: important [旧的前端代码演示](./frontend-deprecated.md) 已弃用，请迁移至此新的方案。
|
||||
::: important 旧的前端代码演示 已弃用，请迁移至此新的方案。
|
||||
|
||||
旧的方案由 [vuepress-plugin-md-enhance](https://plugin-md-enhance.vuejs.press/zh/) 提供，感谢在过去
|
||||
提供的代码演示的支持，在 `vuepress-plugin-md-enhance` 中代码演示功能也将迁移至 [vuepress/ecosystem](https://github.com/vuepress/ecosystem)，
|
||||
|
||||
@ -25,7 +25,6 @@
|
||||
"markmap-toolbar": "catalog:prod",
|
||||
"markmap-view": "catalog:prod",
|
||||
"mermaid": "catalog:dev",
|
||||
"sass-embedded": "catalog:peer",
|
||||
"swiper": "catalog:peer",
|
||||
"vue": "catalog:prod",
|
||||
"vuepress-theme-plume": "workspace:*"
|
||||
|
||||
@ -14,7 +14,6 @@
|
||||
"@iconify/json": "catalog:peer",
|
||||
"@vuepress/bundler-vite": "catalog:vuepress",
|
||||
"http-server": "catalog:dev",
|
||||
"sass-embedded": "catalog:peer",
|
||||
"vue": "catalog:prod",
|
||||
"vuepress-theme-plume": "workspace:*"
|
||||
}
|
||||
|
||||
@ -66,6 +66,7 @@
|
||||
"memfs": "catalog:dev",
|
||||
"minimist": "catalog:dev",
|
||||
"rimraf": "catalog:dev",
|
||||
"sass-embedded": "catalog:peer",
|
||||
"stylelint": "catalog:dev",
|
||||
"stylus": "catalog:dev",
|
||||
"tsconfig-vuepress": "catalog:dev",
|
||||
|
||||
@ -63,6 +63,9 @@
|
||||
"hls.js": {
|
||||
"optional": true
|
||||
},
|
||||
"less": {
|
||||
"optional": true
|
||||
},
|
||||
"markdown-it": {
|
||||
"optional": true
|
||||
},
|
||||
@ -71,6 +74,15 @@
|
||||
},
|
||||
"pyodide": {
|
||||
"optional": true
|
||||
},
|
||||
"sass": {
|
||||
"optional": true
|
||||
},
|
||||
"sass-embedded": {
|
||||
"optional": true
|
||||
},
|
||||
"stylus": {
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
|
||||
635
pnpm-lock.yaml
generated
635
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -8,7 +8,6 @@ overrides:
|
||||
'@bufbuild/protobuf': ^2.5.2
|
||||
'@typescript-eslint/utils': ^8.34.1
|
||||
esbuild: ^0.25.5
|
||||
sass: ^1.89.2
|
||||
sass-embedded: ^1.89.2
|
||||
|
||||
patchedDependencies:
|
||||
@ -65,7 +64,6 @@ catalogs:
|
||||
pyodide: ^0.27.7
|
||||
sass: ^1.89.2
|
||||
sass-embedded: ^1.89.2
|
||||
sass-loader: ^16.0.5
|
||||
swiper: ^11.2.8
|
||||
prod:
|
||||
'@clack/prompts': ^0.11.0
|
||||
@ -120,27 +118,27 @@ catalogs:
|
||||
vue: ^3.5.17
|
||||
vuepress:
|
||||
'@vuepress/bundler-vite': 2.0.0-rc.23
|
||||
'@vuepress/helper': 2.0.0-rc.109
|
||||
'@vuepress/helper': 2.0.0-rc.110
|
||||
'@vuepress/plugin-cache': 2.0.0-rc.103
|
||||
'@vuepress/plugin-comment': 2.0.0-rc.109
|
||||
'@vuepress/plugin-copy-code': 2.0.0-rc.109
|
||||
'@vuepress/plugin-docsearch': 2.0.0-rc.109
|
||||
'@vuepress/plugin-git': 2.0.0-rc.109
|
||||
'@vuepress/plugin-llms': 2.0.0-rc.109
|
||||
'@vuepress/plugin-markdown-hint': 2.0.0-rc.109
|
||||
'@vuepress/plugin-markdown-image': 2.0.0-rc.109
|
||||
'@vuepress/plugin-markdown-include': 2.0.0-rc.109
|
||||
'@vuepress/plugin-markdown-math': 2.0.0-rc.109
|
||||
'@vuepress/plugin-nprogress': 2.0.0-rc.109
|
||||
'@vuepress/plugin-photo-swipe': 2.0.0-rc.109
|
||||
'@vuepress/plugin-reading-time': 2.0.0-rc.109
|
||||
'@vuepress/plugin-seo': 2.0.0-rc.109
|
||||
'@vuepress/plugin-shiki': 2.0.0-rc.109
|
||||
'@vuepress/plugin-sitemap': 2.0.0-rc.109
|
||||
'@vuepress/plugin-watermark': 2.0.0-rc.109
|
||||
'@vuepress/shiki-twoslash': 2.0.0-rc.109
|
||||
'@vuepress/plugin-comment': 2.0.0-rc.110
|
||||
'@vuepress/plugin-copy-code': 2.0.0-rc.110
|
||||
'@vuepress/plugin-docsearch': 2.0.0-rc.110
|
||||
'@vuepress/plugin-git': 2.0.0-rc.110
|
||||
'@vuepress/plugin-llms': 2.0.0-rc.110
|
||||
'@vuepress/plugin-markdown-chart': 2.0.0-rc.110
|
||||
'@vuepress/plugin-markdown-hint': 2.0.0-rc.110
|
||||
'@vuepress/plugin-markdown-image': 2.0.0-rc.110
|
||||
'@vuepress/plugin-markdown-include': 2.0.0-rc.110
|
||||
'@vuepress/plugin-markdown-math': 2.0.0-rc.110
|
||||
'@vuepress/plugin-nprogress': 2.0.0-rc.110
|
||||
'@vuepress/plugin-photo-swipe': 2.0.0-rc.110
|
||||
'@vuepress/plugin-reading-time': 2.0.0-rc.110
|
||||
'@vuepress/plugin-seo': 2.0.0-rc.110
|
||||
'@vuepress/plugin-shiki': 2.0.0-rc.110
|
||||
'@vuepress/plugin-sitemap': 2.0.0-rc.110
|
||||
'@vuepress/plugin-watermark': 2.0.0-rc.110
|
||||
'@vuepress/shiki-twoslash': 2.0.0-rc.110
|
||||
vuepress: 2.0.0-rc.23
|
||||
vuepress-plugin-md-enhance: 2.0.0-rc.90
|
||||
onlyBuiltDependencies:
|
||||
- '@parcel/watcher'
|
||||
- core-js
|
||||
|
||||
@ -68,9 +68,6 @@
|
||||
"@iconify/json": "catalog:peer",
|
||||
"@vuepress/shiki-twoslash": "catalog:vuepress",
|
||||
"mathjax-full": "catalog:peer",
|
||||
"sass": "catalog:peer",
|
||||
"sass-embedded": "catalog:peer",
|
||||
"sass-loader": "catalog:peer",
|
||||
"swiper": "catalog:peer",
|
||||
"vuepress": "catalog:vuepress"
|
||||
},
|
||||
@ -84,15 +81,6 @@
|
||||
"mathjax-full": {
|
||||
"optional": true
|
||||
},
|
||||
"sass": {
|
||||
"optional": true
|
||||
},
|
||||
"sass-embedded": {
|
||||
"optional": true
|
||||
},
|
||||
"sass-loader": {
|
||||
"optional": true
|
||||
},
|
||||
"swiper": {
|
||||
"optional": true
|
||||
}
|
||||
@ -109,6 +97,7 @@
|
||||
"@vuepress/plugin-copy-code": "catalog:vuepress",
|
||||
"@vuepress/plugin-docsearch": "catalog:vuepress",
|
||||
"@vuepress/plugin-git": "catalog:vuepress",
|
||||
"@vuepress/plugin-markdown-chart": "catalog:vuepress",
|
||||
"@vuepress/plugin-markdown-hint": "catalog:vuepress",
|
||||
"@vuepress/plugin-markdown-image": "catalog:vuepress",
|
||||
"@vuepress/plugin-markdown-include": "catalog:vuepress",
|
||||
@ -134,7 +123,6 @@
|
||||
"nanoid": "catalog:prod",
|
||||
"package-manager-detector": "catalog:prod",
|
||||
"vue": "catalog:prod",
|
||||
"vuepress-plugin-md-enhance": "catalog:vuepress",
|
||||
"vuepress-plugin-md-power": "workspace:*",
|
||||
"vuepress-plugin-replace-assets": "workspace:*"
|
||||
},
|
||||
|
||||
@ -1,154 +1,6 @@
|
||||
/* stylelint-disable no-descending-specificity */
|
||||
|
||||
/* -------------------- Markdown Enhance: Code Demo -------------------- */
|
||||
.vp-doc .vp-code-demo {
|
||||
overflow: hidden;
|
||||
border: solid 1px var(--vp-c-divider);
|
||||
transition: border var(--vp-t-color);
|
||||
}
|
||||
|
||||
@media (max-width: 419px) {
|
||||
.vp-doc .vp-code-demo .vp-code-demo-codes div[class*="language-"] {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.vp-doc .vp-code-demo:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.vp-doc .vp-code-demo .vp-code-demo-header {
|
||||
padding: 8px 12px;
|
||||
transition: background-color var(--vp-t-color);
|
||||
}
|
||||
|
||||
.vp-doc .vp-code-demo .vp-code-demo-code-wrapper {
|
||||
margin-bottom: -13px;
|
||||
}
|
||||
|
||||
|
||||
.vp-doc .vp-code-demo .vp-code-demo-toggle-button {
|
||||
margin: 0 12px 0 8px;
|
||||
background-color: var(--vp-c-gray-2);
|
||||
transition: background-color var(--vp-t-color);
|
||||
}
|
||||
|
||||
.vp-doc .vp-code-demo .vp-code-demo-toggle-button:hover {
|
||||
background-color: var(--vp-c-gray-1);
|
||||
}
|
||||
|
||||
.vp-doc .vp-code-demo .vp-code-demo-title {
|
||||
font-size: 1rem;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.vp-doc .vp-code-demo .vp-code-demo-display {
|
||||
border-bottom: transparent;
|
||||
}
|
||||
|
||||
.vp-doc .vp-code-demo .code-demo-jsfiddle .jsfiddle-button,
|
||||
.vp-doc .vp-code-demo .code-demo-codepen .codepen-button {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.vp-doc .vp-code-demo .vp-code-demo-codes div[class*="language-"] {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
border-bottom: 2px dashed var(--vp-c-divider);
|
||||
border-radius: 0;
|
||||
transition: border-bottom var(--vp-t-color);
|
||||
}
|
||||
|
||||
.vp-doc .vp-code-demo .vp-code-demo-codes div[class*="language-"]:first-of-type {
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.vp-doc .vp-code-demo .vp-code-demo-codes div[class*="language-"]:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.vp-doc .vp-code-demo .vp-code-demo-codes div[class*="language-"] pre {
|
||||
margin-bottom: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 419px) {
|
||||
.vp-doc .vp-code-demo {
|
||||
margin: 8px -12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* -------------------- Markdown Enhance: markdown Demo -------------------- */
|
||||
.vp-doc .vp-md-demo {
|
||||
margin-bottom: 16px;
|
||||
overflow: hidden;
|
||||
border: solid 1px var(--vp-c-divider);
|
||||
transition: border var(--vp-t-color);
|
||||
}
|
||||
|
||||
@media (max-width: 419px) {
|
||||
.vp-doc .vp-md-demo .vp-md-demo-codes div[class*="language-"] {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.vp-doc .vp-md-demo:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.vp-doc .vp-md-demo .vp-md-demo-header {
|
||||
padding: 8px 12px;
|
||||
font-size: 16px;
|
||||
line-height: 1.7;
|
||||
transition: background-color var(--vp-t-color);
|
||||
}
|
||||
|
||||
.vp-doc .vp-md-demo .vp-md-demo-toggle-button {
|
||||
margin: 0 12px 0 8px;
|
||||
background-color: var(--vp-c-gray-2);
|
||||
transition: background-color var(--vp-t-color);
|
||||
}
|
||||
|
||||
.vp-doc .vp-md-demo .vp-md-demo-toggle-button:hover {
|
||||
background-color: var(--vp-c-gray-1);
|
||||
}
|
||||
|
||||
.vp-doc .vp-md-demo .vp-md-demo-title {
|
||||
font-size: 1rem;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.vp-doc .vp-md-demo .vp-md-demo-display {
|
||||
border-bottom: transparent;
|
||||
}
|
||||
|
||||
.vp-doc .vp-md-demo .vp-md-demo-codes div[class*="language-"] {
|
||||
border-bottom: 2px dashed var(--vp-c-divider);
|
||||
transition: border-bottom var(--vp-t-color);
|
||||
}
|
||||
|
||||
.vp-doc .vp-md-demo .vp-md-demo-codes div[class*="language-"]:first-of-type {
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.vp-doc .vp-md-demo .vp-md-demo-codes div[class*="language-"]:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.vp-doc .vp-md-demo .vp-md-demo-codes div[class*="language-"] pre {
|
||||
margin-bottom: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 419px) {
|
||||
.vp-doc .vp-md-demo {
|
||||
margin: 8px -12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------- Markdown Enhance: Task List ---------------------- */
|
||||
/* ---------------------- Markdown: Task List ---------------------- */
|
||||
.vp-doc .task-list-container {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
@ -194,7 +46,7 @@
|
||||
--icon: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1em" height="1em" viewBox="0 0 32 32"%3E%3Cpath fill="%23299764" d="M29.548 3.043a2.5 2.5 0 0 0-3.513.4L16 16.067l-3.508-4.414a2.5 2.5 0 0 0-3.915 3.112l5.465 6.875c.474.597 1.195.943 1.957.943s1.482-.35 1.957-.944L29.95 6.555c.86-1.08.68-2.654-.402-3.513zM24.5 24.5h-17v-17h12.756l2.385-3H6c-.83 0-1.5.67-1.5 1.5v20c0 .828.67 1.5 1.5 1.5h20a1.5 1.5 0 0 0 1.5-1.5V12.85l-3 3.774z"%2F%3E%3C%2Fsvg%3E');
|
||||
}
|
||||
|
||||
/* --------------------- Markdown Enhance: Footnote -------------------------------- */
|
||||
/* --------------------- Markdown: Footnote -------------------------------- */
|
||||
.vp-doc .footnotes-sep {
|
||||
/* display: none; */
|
||||
margin-top: 32px;
|
||||
@ -270,7 +122,7 @@
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* -------------- Markdown Enhance: Image Figure --------------------- */
|
||||
/* -------------- Markdown: Image Figure --------------------- */
|
||||
.vp-doc figure {
|
||||
position: relative;
|
||||
display: flex;
|
||||
@ -301,17 +153,15 @@
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
/* --------------------- Markdown Enhance: Mermaid ------------------------ */
|
||||
/* --------------------- Markdown Chart: Mermaid ------------------------ */
|
||||
.mermaid-actions {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.mermaid-actions .preview-button,
|
||||
.mermaid-actions .download-button {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
color: var(--vp-c-text-2);
|
||||
transition: color var(--vp-t-color);
|
||||
transition: color var(--vp-t-color), background-color var(--vp-t-color);
|
||||
}
|
||||
|
||||
.mermaid-actions .preview-button:hover,
|
||||
@ -344,7 +194,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* --------------------- Markdown Enhance: Flowchart ------------------------ */
|
||||
/* --------------------- Markdown Chart: Flowchart ------------------------ */
|
||||
|
||||
.flowchart-wrapper svg {
|
||||
display: inline-block;
|
||||
|
||||
@ -4,7 +4,6 @@ import {
|
||||
addViteOptimizeDepsExclude,
|
||||
addViteOptimizeDepsInclude,
|
||||
addViteSsrNoExternal,
|
||||
chainWebpack,
|
||||
} from '@vuepress/helper'
|
||||
import { isPackageExists } from 'local-pkg'
|
||||
|
||||
@ -32,31 +31,4 @@ export function extendsBundlerOptions(bundlerOptions: any, app: App): void {
|
||||
addViteOptimizeDepsInclude(bundlerOptions, app, ['swiper/modules', 'swiper/vue'])
|
||||
addViteSsrNoExternal(bundlerOptions, app, ['swiper'])
|
||||
}
|
||||
|
||||
const silenceDeprecations = ['mixed-decls', 'legacy-js-api', 'import', 'global-builtin']
|
||||
chainWebpack(bundlerOptions, app, (config) => {
|
||||
config.module
|
||||
.rule('scss')
|
||||
.use('sass-loader')
|
||||
.tap((options: any) => ({
|
||||
...options,
|
||||
sassOptions: {
|
||||
silenceDeprecations,
|
||||
...options.sassOptions,
|
||||
},
|
||||
}))
|
||||
})
|
||||
|
||||
addViteConfig(bundlerOptions, app, {
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
sass: {
|
||||
silenceDeprecations,
|
||||
},
|
||||
scss: {
|
||||
silenceDeprecations,
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
@ -39,7 +39,8 @@ export function detectDependencies(options: ThemeOptions, plugins: ThemeBuiltinP
|
||||
|
||||
const markdown = options.markdown || {}
|
||||
const mdPower = isPlainObject(plugins.markdownPower) ? plugins.markdownPower : {}
|
||||
const mdEnhance = isPlainObject(plugins.markdownEnhance) ? plugins.markdownEnhance : {}
|
||||
|
||||
const mdChart = isPlainObject(plugins.markdownChart) ? plugins.markdownChart : {}
|
||||
|
||||
const add = (name: string) => {
|
||||
const list = DEPENDENCIES[name].filter(dep => !isPackageExists(dep))
|
||||
@ -54,7 +55,7 @@ export function detectDependencies(options: ThemeOptions, plugins: ThemeBuiltinP
|
||||
add('pythonRepl')
|
||||
|
||||
;['chartjs', 'echarts', 'markmap', 'mermaid', 'flowchart'].forEach((dep) => {
|
||||
if (markdown[dep] || mdEnhance[dep])
|
||||
if (markdown[dep] || mdChart[dep])
|
||||
add(dep)
|
||||
})
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@ export const PLUGINS_SUPPORTED_FIELDS: (keyof ThemeBuiltinPlugins)[] = [
|
||||
'git',
|
||||
'nprogress',
|
||||
'photoSwipe',
|
||||
'markdownEnhance',
|
||||
'markdownChart',
|
||||
'markdownPower',
|
||||
'markdownImage',
|
||||
'markdownMath',
|
||||
@ -24,18 +24,13 @@ export const PLUGINS_SUPPORTED_FIELDS: (keyof ThemeBuiltinPlugins)[] = [
|
||||
'replaceAssets',
|
||||
]
|
||||
|
||||
export const MARKDOWN_ENHANCE_FIELDS: (keyof MarkdownEnhancePluginOptions)[] = [
|
||||
export const MARKDOWN_CHART_FIELDS: (keyof MarkdownEnhancePluginOptions)[] = [
|
||||
'chartjs',
|
||||
'echarts',
|
||||
'mermaid',
|
||||
'markmap',
|
||||
'plantuml',
|
||||
'flowchart',
|
||||
'revealJs',
|
||||
'playground',
|
||||
'vuePlayground',
|
||||
'kotlinPlayground',
|
||||
'sandpack',
|
||||
]
|
||||
|
||||
export const MARKDOWN_POWER_FIELDS: (keyof MarkdownPowerPluginOptions)[] = [
|
||||
@ -68,9 +63,8 @@ export const MARKDOWN_POWER_FIELDS: (keyof MarkdownPowerPluginOptions)[] = [
|
||||
]
|
||||
|
||||
export const MARKDOWN_SUPPORT_FIELDS: (keyof MarkdownOptions)[] = [
|
||||
...(MARKDOWN_ENHANCE_FIELDS as (keyof MarkdownOptions)[]),
|
||||
...(MARKDOWN_CHART_FIELDS as (keyof MarkdownOptions)[]),
|
||||
...MARKDOWN_POWER_FIELDS,
|
||||
'oldDemo',
|
||||
'image',
|
||||
'math',
|
||||
'include',
|
||||
|
||||
@ -1,25 +1,25 @@
|
||||
import type { MarkdownChartPluginOptions } from '@vuepress/plugin-markdown-chart'
|
||||
import type { MarkdownHintPluginOptions } from '@vuepress/plugin-markdown-hint'
|
||||
import type { MarkdownImagePluginOptions } from '@vuepress/plugin-markdown-image'
|
||||
import type { MarkdownIncludePluginOptions } from '@vuepress/plugin-markdown-include'
|
||||
import type { MarkdownMathPluginOptions } from '@vuepress/plugin-markdown-math'
|
||||
import type { PluginConfig } from 'vuepress'
|
||||
import type { MarkdownEnhancePluginOptions } from 'vuepress-plugin-md-enhance'
|
||||
import type { MarkdownPowerPluginOptions } from 'vuepress-plugin-md-power'
|
||||
import type { MarkdownOptions, ThemeBuiltinPlugins } from '../../shared/index.js'
|
||||
import { isPlainObject } from '@vuepress/helper'
|
||||
import { markdownChartPlugin } from '@vuepress/plugin-markdown-chart'
|
||||
import { markdownHintPlugin } from '@vuepress/plugin-markdown-hint'
|
||||
import { markdownImagePlugin } from '@vuepress/plugin-markdown-image'
|
||||
import { markdownIncludePlugin } from '@vuepress/plugin-markdown-include'
|
||||
import { markdownMathPlugin } from '@vuepress/plugin-markdown-math'
|
||||
import { mdEnhancePlugin } from 'vuepress-plugin-md-enhance'
|
||||
import { markdownPowerPlugin } from 'vuepress-plugin-md-power'
|
||||
import { MARKDOWN_ENHANCE_FIELDS, MARKDOWN_POWER_FIELDS } from '../detector/index.js'
|
||||
import { MARKDOWN_CHART_FIELDS, MARKDOWN_POWER_FIELDS } from '../detector/index.js'
|
||||
import { getThemeConfig } from '../loadConfig/index.js'
|
||||
|
||||
export function markdownPlugins(pluginOptions: ThemeBuiltinPlugins): PluginConfig {
|
||||
const options = getThemeConfig()
|
||||
const plugins: PluginConfig = []
|
||||
let { hint, image, include, math, mdEnhance, mdPower } = splitMarkdownOptions(options.markdown ?? {})
|
||||
let { hint, image, include, math, mdChart, mdPower } = splitMarkdownOptions(options.markdown ?? {})
|
||||
|
||||
plugins.push(markdownHintPlugin({
|
||||
hint: hint.hint ?? true,
|
||||
@ -27,13 +27,6 @@ export function markdownPlugins(pluginOptions: ThemeBuiltinPlugins): PluginConfi
|
||||
injectStyles: false,
|
||||
}))
|
||||
|
||||
if (pluginOptions.markdownEnhance !== false) {
|
||||
plugins.push(mdEnhancePlugin({
|
||||
...pluginOptions.markdownEnhance,
|
||||
...mdEnhance,
|
||||
}))
|
||||
}
|
||||
|
||||
if (pluginOptions.markdownPower !== false) {
|
||||
const shikiOptions = options.codeHighlighter ?? pluginOptions.shiki
|
||||
|
||||
@ -54,6 +47,11 @@ export function markdownPlugins(pluginOptions: ThemeBuiltinPlugins): PluginConfi
|
||||
}))
|
||||
}
|
||||
|
||||
mdChart ??= pluginOptions.markdownChart
|
||||
if (mdChart) {
|
||||
plugins.push(markdownChartPlugin(mdChart))
|
||||
}
|
||||
|
||||
math ??= pluginOptions.markdownMath
|
||||
if (math !== false) {
|
||||
plugins.push(markdownMathPlugin(math ?? { type: 'katex' }))
|
||||
@ -73,32 +71,34 @@ export function markdownPlugins(pluginOptions: ThemeBuiltinPlugins): PluginConfi
|
||||
}
|
||||
|
||||
function splitMarkdownOptions(options: MarkdownOptions): {
|
||||
mdEnhance: MarkdownEnhancePluginOptions
|
||||
mdPower: MarkdownPowerPluginOptions
|
||||
mdChart?: false | MarkdownChartPluginOptions
|
||||
image?: false | MarkdownImagePluginOptions
|
||||
include?: boolean | MarkdownIncludePluginOptions
|
||||
math?: false | MarkdownMathPluginOptions
|
||||
hint: MarkdownHintPluginOptions
|
||||
} {
|
||||
const { hint, alert, oldDemo, image, include, math, ...restOptions } = options
|
||||
const mdEnhance: MarkdownEnhancePluginOptions = { demo: oldDemo }
|
||||
const mdChart: MarkdownChartPluginOptions = {}
|
||||
const mdPower: MarkdownPowerPluginOptions = {}
|
||||
|
||||
for (const key in restOptions) {
|
||||
if (MARKDOWN_ENHANCE_FIELDS.includes(key as keyof MarkdownEnhancePluginOptions)) {
|
||||
mdEnhance[key] = restOptions[key]
|
||||
if (MARKDOWN_CHART_FIELDS.includes(key as keyof MarkdownChartPluginOptions)) {
|
||||
mdChart[key] = restOptions[key]
|
||||
}
|
||||
else if (MARKDOWN_POWER_FIELDS.includes(key as keyof MarkdownPowerPluginOptions)) {
|
||||
mdPower[key] = restOptions[key]
|
||||
}
|
||||
}
|
||||
|
||||
const mdChartKeys = Object.keys(mdChart)
|
||||
|
||||
return {
|
||||
hint: { hint, alert },
|
||||
image,
|
||||
include,
|
||||
math,
|
||||
mdEnhance,
|
||||
mdChart: mdChartKeys.length && mdChartKeys.some(key => mdChart[key] !== false) ? mdChart : false,
|
||||
mdPower,
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,22 +1,18 @@
|
||||
import type { MarkdownChartPluginOptions } from '@vuepress/plugin-markdown-chart'
|
||||
import type { MarkdownHintPluginOptions } from '@vuepress/plugin-markdown-hint'
|
||||
import type { MarkdownImagePluginOptions } from '@vuepress/plugin-markdown-image'
|
||||
import type { MarkdownIncludePluginOptions } from '@vuepress/plugin-markdown-include'
|
||||
import type { MarkdownMathPluginOptions } from '@vuepress/plugin-markdown-math'
|
||||
import type { MarkdownEnhancePluginOptions } from 'vuepress-plugin-md-enhance'
|
||||
import type { MarkdownPowerPluginOptions } from 'vuepress-plugin-md-power'
|
||||
|
||||
export interface MarkdownOptions extends MarkdownPowerPluginOptions,
|
||||
Pick<
|
||||
MarkdownEnhancePluginOptions,
|
||||
'chartjs' | 'echarts' | 'mermaid' | 'markmap' | 'plantuml' | 'flowchart' |
|
||||
'revealJs' | 'playground' | 'vuePlayground' | 'kotlinPlayground' | 'sandpack'
|
||||
>,
|
||||
MarkdownChartPluginOptions,
|
||||
Pick<MarkdownHintPluginOptions, 'alert' | 'hint'> {
|
||||
/**
|
||||
* 此项为 `vuepress-plugin-md-enhance` 的 `demo` 选项，已弃用
|
||||
* @deprecated use `demo` instead
|
||||
*/
|
||||
oldDemo?: MarkdownEnhancePluginOptions['demo']
|
||||
oldDemo?: never
|
||||
|
||||
/**
|
||||
* markdown image enhance
|
||||
|
||||
@ -3,6 +3,7 @@ import type { CachePluginOptions } from '@vuepress/plugin-cache'
|
||||
import type { CommentPluginOptions } from '@vuepress/plugin-comment'
|
||||
import type { CopyCodePluginOptions } from '@vuepress/plugin-copy-code'
|
||||
import type { DocSearchOptions } from '@vuepress/plugin-docsearch'
|
||||
import type { MarkdownChartPluginOptions } from '@vuepress/plugin-markdown-chart'
|
||||
import type { MarkdownImagePluginOptions } from '@vuepress/plugin-markdown-image'
|
||||
import type { MarkdownIncludePluginOptions } from '@vuepress/plugin-markdown-include'
|
||||
import type { MarkdownMathPluginOptions } from '@vuepress/plugin-markdown-math'
|
||||
@ -11,7 +12,6 @@ import type { SeoPluginOptions } from '@vuepress/plugin-seo'
|
||||
import type { ShikiPluginOptions } from '@vuepress/plugin-shiki'
|
||||
import type { SitemapPluginOptions } from '@vuepress/plugin-sitemap'
|
||||
import type { WatermarkPluginOptions } from '@vuepress/plugin-watermark'
|
||||
import type { MarkdownEnhancePluginOptions } from 'vuepress-plugin-md-enhance'
|
||||
import type { MarkdownPowerPluginOptions } from 'vuepress-plugin-md-power'
|
||||
import type { ReplaceAssetsPluginOptions } from 'vuepress-plugin-replace-assets'
|
||||
|
||||
@ -52,13 +52,9 @@ export interface ThemeBuiltinPlugins {
|
||||
photoSwipe?: false
|
||||
|
||||
/**
|
||||
* 是否启用 `vuepress-plugin-md-enhance` 插件
|
||||
*
|
||||
* - `hint`, `alert` 已迁移至 `@vuepress/plugin-markdown-hint`, 且主题内置并默认启用。
|
||||
* - `imgSize`, `imgMark`, `imgLazyload`, `figure`, `obsidianImgSize` 已迁移至 `@vuepress/plugin-markdown-image`, 请使用 `plugins.markdownImage` 配置项代替。
|
||||
* - `katex`, `mathjax` 已迁移至 `@vuepress/plugin-markdown-math`, 请使用 `plugins.markdownMath` 配置项代替
|
||||
* @deprecated 插件相关功能已迁移至其他官方插件，此插件已弃用
|
||||
*/
|
||||
markdownEnhance?: false | MarkdownEnhancePluginOptions
|
||||
markdownEnhance?: never
|
||||
|
||||
/**
|
||||
* 是否启用 `vuepress-plugin-md-power` 插件
|
||||
@ -90,6 +86,15 @@ export interface ThemeBuiltinPlugins {
|
||||
*/
|
||||
markdownInclude?: boolean | MarkdownIncludePluginOptions
|
||||
|
||||
/**
|
||||
* 是否启用 `@vuepress/plugin-markdown-chart` 插件
|
||||
*
|
||||
* @default false
|
||||
*
|
||||
* @see https://ecosystem.vuejs.press/plugins/markdown/markdown-chart/
|
||||
*/
|
||||
markdownChart?: false | MarkdownChartPluginOptions
|
||||
|
||||
/**
|
||||
* 评论插件
|
||||
*/
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user