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: {}, // ::collect:name:: Inline iconify
// 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
// 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 :::python-repl
// imageSize: true, // Add width/height attributes to images during build
// replit: true, // Deprecated, use repl
},
}),
})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
The theme enables icon support by default (equivalent to icon: {}), so no extra configuration is required.
Thanks to iconify, you can use 200k+ icons from Iconify in Markdown.
Syntax:
::collect:name::Please refer to the Complete Usage Documentation
The type of icon is IconOptions (an object), and it does not accept boolean. icon: true will not be recognized; use icon: {} or icon: { provider: 'iconify' } instead. The former icons field is deprecated, and its behavior is equivalent to icon: {}.
You can also pass an object for more detailed configuration:
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
theme: plumeTheme({
markdown: {
icon: {
// Icon provider, defaults to 'iconify'
provider: 'iconify', // 'iconify' | 'iconfont' | 'fontawesome'
// Icon size, defaults to '1em'
size: '1em',
// Icon color, defaults to 'currentColor'
color: 'currentColor',
// Icon prefix
// iconify: defaults to '', supports collection names such as 'mdi', 'ri', etc.
// iconfont: defaults to 'iconfont icon-'
// fontawesome: defaults to 'fas'
prefix: '',
// iconify only: preload icons, used to preset local assets when using <VPIcon> directly in components
preload: ['mdi:home', 'ri:github-fill'],
// iconfont/fontawesome only: icon asset link
// assets: '//at.alicdn.com/t/font_xxx.css',
},
},
}),
})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, Kotlin, and Python code, as well as online editing.
You can also enable only some of the languages, in which case use the top-level markdown entry (recommended):
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
theme: plumeTheme({
markdown: {
repl: {
rust: true,
go: true,
kotlin: true,
python: 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
The theme enables this feature by default (equivalent to plot: true). Set plot to false to disable it entirely.
Syntax:
!!content!!Please refer to the Complete Usage Documentation
File Tree
The theme enables this feature by default (equivalent to fileTree: true). Set fileTree to false to disable it entirely.
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.
