Markdown Power
About 859 wordsAbout 3 min
2025-10-09
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
icons: 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
},
// Can also be configured in `plugins.markdownPower`, but not recommended
plugins: {
markdownPower: {}
}
}),
})
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 icons
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
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
imageSize
istrue
, the plugin only processes local images, equivalent to thelocal
option; - If
imageSize
is'local'
, the plugin only processes local images; - If
imageSize
is'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.