markdown-stylize

@vuepress/plugin-markdown-stylize

Stylizing content in your VuePress site.

Usage

npm i -D @vuepress/plugin-markdown-stylize@next
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

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."

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