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.

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

VuePress is ==powerful==!

Adding layouts

You can use @flexs/@flex, @grids/@grid and @columns/@column with @end to add layouts for content:

@flexs gap-4 items-center

@flex.flex-demo flex-1

### Left Column

This content grows to fill available space.

@flex.flex-demo

### Right Column

This content takes its natural width.

@end

For syntax, see @mdit/plugin-layout.

Creating Spoilers

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

VuePress is !!powerful!!.

Creating Steps

You can use ::: steps container to display content in progressive steps. Use ordered (or unordered) lists to represent steps, and any Markdown syntax is supported inside.

::: steps

1. Step 1

   ```ts
   console.log('Hello World!')
   ```

2. Step 2

   Related content of step 2

3. End

:::

You can also use an unordered list:

::: steps

- Step 1

  Related content of step 1

- Step 2

  Related content of step 2

:::

Superscript and Subscript

You can use ^ for superscript and ~ for subscript.

<!-- prettier-ignore-start -->

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

<!-- prettier-ignore-end -->

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