# vuepress-plugin-container

# Installation

npm install -D vuepress-plugin-container

# Usage

// .vuepress/config.js
module.exports = {
  plugins: [
    // you can use this plugin multiple times
    [
      'vuepress-plugin-container',
      {
        type: 'right',
        defaultTitle: '',
      },
    ],
    [
      'vuepress-plugin-container',
      {
        type: 'theorem',
        before: info => `<div class="theorem"><p class="title">${info}</p>`,
        after: '</div>',
      },
    ],
    // this is how VuePress Default Theme use this plugin
    [
      'vuepress-plugin-container',
      {
        type: 'tip',
        defaultTitle: {
          '/': 'TIP',
          '/zh/': '提示',
        },
      },
    ],
  ],
}

// .vuepress/styles/index.styl
.theorem
  margin 1rem 0
  padding .1rem 1.5rem
  border-radius 0.4rem
  background-color #f0f4f8
  .title
    font-weight bold
.custom-block
  &.right
    color transparentify($textColor, 0.4)
    font-size 0.9rem
    text-align right

# Configs

# type

type: string
required: true

The type for the container. For example, if type is set to foo, only the following syntax will be parsed as a container:

::: foo bar
write something here ~
:::

# defaultTitle

type: string | Record<string, string>
default: the upper case of type

The default title for the container. If no title is provided, defaultTitle will be shown as the title of the container.

Provide an object as locale config, and the default title will depend on current locale.

# before

type: string | ((info: string) => string)
default: undefined

String to be placed before the block.

If specified as a function, an argument info will be passed to it. (In the example above, info will be bar.)

If specified a value for before, defaultTitle will be ignored.

# after

type: string | ((info: string) => string)
default: undefined

String to be placed after the block.

If specified as a function, an argument info will be passed to it. (In the example above, info will be bar.)

# validate

type: ((params: string) => boolean)
default: undefined

A function to validate tail after opening marker, should return true on success.

See markdown-it-container API

# render

type: Function
default: undefined

The renderer function for opening/closing tokens. If specified, before, after and defaultTitle will be ignored.

See markdown-it-container API

# marker

type: string
default: ':'

The character to use as a delimiter.

See markdown-it-container API

# Demo

Input

::: theorem Newton's First Law
In an inertial frame of reference, an object either remains at rest or continues to move at a constant velocity, unless acted upon by a force.
::: right
From [Wikipedia](https://en.wikipedia.org/wiki/Newton%27s_laws_of_motion)
:::
:::
::: tip
Tip container of `@vuepress/theme-default`
:::

Output

Newton's First Law

In an inertial frame of reference, an object either remains at rest or continues to move at a constant velocity, unless acted upon by a force.

From Wikipedia

TIP

Tip container of @vuepress/theme-default