Markdown Power
Overview
Provides Markdown enhancement features for the theme.
Related plugin: vuepress-plugin-md-power
Configuration
Default configuration:
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
theme: plumeTheme({
markdown: {
fileTree: true, // :::file-tree File tree container
plot: true, // !!plot!! Hidden text
icon: true, // ::collect:name:: Inline iconify icons
// The following features are not enabled by default; you need to enable them manually
// npmTo: true, // :::npm-to
// demo: true, // :::demo
// pdf: true, // @[pdf](url) Embed PDF files
// bilibili: true, // @[bilibili](bvid) Embed bilibili videos
// acfun: true, // @[acfun](id) Embed AcFun videos
// youtube: true, // @[youtube](id) Embed YouTube videos
// codepen: true, // @[codepen](user/slash) Embed CodePen
// replit: true, // @[replit](user/repl-name) Embed Replit
// codeSandbox: true, // @[codesandbox](id) Embed CodeSandbox
// jsfiddle: true, // @[jsfiddle](id) Embed JSFiddle
// caniuse: true, // @[caniuse](feature) Embed Can I Use
// repl: true, // :::go-repl :::kotlin-repl :::rust-repl
// imageSize: true, // Add width/height attributes to images during build
},
}),
})For configuration entry priority information, please refer to Plugin Configuration Entry.
Features
Embed PDF
This feature is not enabled by default; you need to manually set pdf to true.
Syntax:
@[pdf](url)Please refer to the Complete Usage Documentation
Iconify Icons
This feature is not enabled by default; you need to manually set icon to true.
Thanks to iconify, you can use 200k+ icons from Iconify in Markdown.
Syntax:
::collect:name::Please refer to the Complete Usage Documentation
Bilibili Video
This feature is not enabled by default; you need to manually set bilibili to true.
Syntax:
@[bilibili](bvid)Please refer to the Complete Usage Documentation
AcFun Video
This feature is not enabled by default; you need to manually set acfun to true.
Syntax:
@[acfun](id)Please refer to the Complete Usage Documentation(Open in new window)
YouTube Video
This feature is not enabled by default; you need to manually set youtube to true.
Syntax:
@[youtube](id)Please refer to the Complete Usage Documentation
CodePen Demo
This feature is not enabled by default; you need to manually set codepen to true.
Syntax:
@[codepen](user/slash)Please refer to the Complete Usage Documentation
CodeSandbox Demo
This feature is not enabled by default; you need to manually set codeSandbox to true.
Syntax:
@[codesandbox](id)Please refer to the Complete Usage Documentation
JSFiddle Demo
This feature is not enabled by default; you need to manually set jsfiddle to true.
Syntax:
@[jsfiddle](id)Please refer to the Complete Usage Documentation
Can I Use Browser Support
This feature is not enabled by default; you need to manually set caniuse to true.
Syntax:
@[caniuse](feature)Please refer to the Complete Usage Documentation
Repl Code Demo Container
This feature is not enabled by default; you need to manually set repl to true.
Supports online execution of Rust, Golang, and Kotlin code, as well as online editing.
Alternatively, you can enable specific features, as shown below:
export default defineUserConfig({
theme: plumeTheme({
plugins: {
markdownPower: {
repl: {
rust: true,
go: true,
kotlin: true,
},
},
}
})
})Syntax:
::: rust-repl
```rust
// rust code
```
:::
::: go-repl
```go
// go code
```
:::
::: kotlin-repl
```kotlin
// kotlin code
```
:::
::: python-repl
```python
// python code
```
:::Please refer to the complete usage documentation:
Plot Hidden Text
This feature is not enabled by default; you need to manually set plot to true.
Syntax:
!!content!!Please refer to the Complete Usage Documentation
File Tree
This feature is not enabled by default; you need to manually set fileTree to true.
Syntax:
::: file-tree
- folder1
- file1.md
- file2.ts
- folder2
- file3.md
- folder3
:::Please refer to the Complete Usage Documentation
Image Dimensions
This feature adds width and height attributes to image references in markdown files. It reads the original dimensions of the images to set default image sizes and aspect ratios. This resolves layout flickering issues that occur between when an image starts loading and when it completes.
This feature is not enabled by default; you need to manually configure imageSize:
- If
imageSizeistrue, the plugin only processes local images, equivalent to thelocaloption; - If
imageSizeis'local', the plugin only processes local images; - If
imageSizeis'all', the plugin processes both local and remote images.
Important
This feature only takes effect during production builds.
Use the 'all' option with caution, as it will request remote image resources during production builds, which can significantly increase build time. Although the theme optimizes this by loading only a few KB of data from each image to analyze dimensions, it will still impact build performance.
