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:

.vuepress/config.ts
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

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 is true, the plugin only processes local images, equivalent to the local 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.

Contributors

pengzhanbo

Changelog

10/9/25, 7:46 AM

View All Changelog

38505-docs: update en docs (#708)on 10/9/25