VuePress EcosystemVuePress Ecosystem
  • Theme Guidelines
  • theme-default
  • Hope Theme
  • Plume Theme
  • Reco Theme
  • Feature Plugins
  • Markdown Plugins
  • Search Plugins
  • Blog Plugins
  • PWA Plugins
  • Analytics Plugins
  • SEO Plugins
  • Development Plugins
  • Tool Plugins
  • @vuepress/helper
  • English
  • 简体中文
GitHub
  • Theme Guidelines
  • theme-default
  • Hope Theme
  • Plume Theme
  • Reco Theme
  • Feature Plugins
  • Markdown Plugins
  • Search Plugins
  • Blog Plugins
  • PWA Plugins
  • Analytics Plugins
  • SEO Plugins
  • Development Plugins
  • Tool Plugins
  • @vuepress/helper
  • English
  • 简体中文
GitHub
  • append-date
  • markdown-container
  • markdown-ext
  • markdown-image
  • markdown-include
  • markdown-hint
  • markdown-math
  • markdown-stylize
  • markdown-tab
  • links-check
  • prismjs
  • revealjs
    • revealjs
    • Slide Demo
    • Reveal.js Themes
  • shiki

markdown-stylize

@vuepress/plugin-markdown-stylize

Stylizing content in your VuePress site.

Usage

npm i -D @vuepress/plugin-markdown-stylize@next
.vuepress/config.ts
import { markdownStylizePlugin } from '@vuepress/plugin-markdown-stylize'

export default {
  plugins: [
    markdownStylizePlugin({
      // options
    }),
  ],
}

Syntax

Align Content

You can use left center right justify to align text.

Demo

Contents to align left

Contents to align center

Contents to align right

Contents to align justify

::: left
Contents to align left
:::

::: center
Contents to align center
:::

::: right
Contents to align right
:::

::: justify
Contents to align justify
:::

Appending Attributes

You can use {attrs} to add attrs to Markdown content.

For example, if you want a heading2 "Hello World" with an id "say-hello-world", you can write:

## Hello World {#say-hello-world}

If you want an image with class "full-width", you can write:

![img](link/to/image.png) {.full-width}

Also, other attrs are supported, so:

A paragraph with some text. {#p .a .b align=center customize-attr="content with spaces"}

will be rendered into:

<p id="p" class="a b" align="center" customize-attr="content with spaces">
  A paragraph with some text.
</p>

For all demos, see @mdit/plugin-attrs.

Highlighting Content

You can use == to mark text with <mark>.

Demo

VuePress is powerful!

VuePress is ==powerful==!

Creating Spoilers

You can use !! !! to mark a content as spoiler.

Demo

VuePress is powerful.

VuePress is !!powerful!!.

Superscript and Subscript

You can use ^ for superscript and ~ for subscript.

Demo

H2O is a liquid. 210 is 1024.

H~2~O is a liquid. 2^10^ is 1024.

Create your own stylize rules

The custom option receives an array, where each element accepts 2 options:

  • matcher: should be string or RegExp.

  • replacer: a function customizing the matched token

For example, you can use the following config to transform *Recommended* into a Badge Recommended

.vuepress/config.js
import { markdownStylizePlugin } from '@vuepress/plugin-markdown-stylize'

export default {
  plugins: [
    markdownStylizePlugin({
      custom: [
        {
          matcher: 'Recommended',
          replacer: ({ tag }) => {
            if (tag === 'em')
              return {
                tag: 'Badge',
                attrs: { type: 'tip' },
                content: 'Recommended',
              }

            return null
          },
        },
      ],
    }),
  ],
}

Another example is you want to set all the emphasis n't words to red color, so that Setting this to an invalid syntax *doesn't* have any effect. becomes: "Setting this to an invalid syntax doesn't have any effect."

.vuepress/config.js
import { markdownStylizePlugin } from '@vuepress/plugin-markdown-stylize'

export default {
  plugins: [
    markdownStylizePlugin({
      custom: [
        {
          matcher: /n't$/,
          replacer: ({ tag, attrs, content }) => {
            if (tag === 'em')
              return {
                tag: 'span',
                attrs: { ...attrs, style: 'color: red' },
                content,
              }

            return null
          },
        },
      ],
    }),
  ],
}

Also, you can use stylize in frontmatter to provide extra stylize rules for content of the page.

Options

align

  • Type: boolean

  • Details: Whether to enable align support

attrs

  • Type: MarkdownItAttrsOptions | boolean

  • Details:

    Whether to enable attrs support.

    You can also pass an object to specify the options of @mdit/plugin-attrs.

mark

  • Type: boolean

  • Details: Whether to enable mark format support

spoiler

  • Type: boolean

  • Details: Whether to enable spoiler support

sup

  • Type: boolean

  • Details: Whether to enable superscript format support

sub

  • Type: boolean

  • Details: Whether to enable subscript format support

custom

  • Type: MarkdownItStylizeConfig[]

  • Details:

    Create own stylize customizations. For details, see @mdit/plugin-stylize

Edit this page on GitHub
Last Updated:: 4/12/25, 7:03 PM
Contributors: Mister-Hope
Prev
markdown-math
Next
markdown-tab