Vuepress: Custom Containers with more options

[PanJiaChen]

Feature request

First

https://github.com/vuejs/vuepress/blob/cd8ee42fbe2db00ed964e54c60456ba30d9f6e8d/lib/markdown/containers.js#L22

Sometimes l just want Custom Containers without title.

Second

And is it possible that I can customize its class? So I can simply create a custom container with custom css.

[meteorlxy]

How about override the default style in override.styl?

[PanJiaChen]

I don't want to override the style, I also want to continue to use the default style.
And overriding styles means that I can only use three types of container, no more types could l add.

[ulivz]

You can create your custom container by extending the md instance via config/#markdown-config.

Closing as this can be done in userland and we don't plan to add built-in support for it.

[GrayedFox]

This is nearly a direct copy paste of the code used by Vuepress to generate custom containers (some minor changes so that our internal linting rules and style checks pass):

const container = require('markdown-it-container')

function createContainer(type, defaultTitle) {
  return [container, type, {
    render(tokens, idx) {
      const token = tokens[idx]
      const info = token.info.trim().slice(type.length).trim()
      const title = info || defaultTitle
      if (token.nesting === 1) {
        return `<div class="${type} custom-block"><p class="custom-block-title">${title}</p>\n`
      } else {
        return `</div>\n`
      }
    }
  }]
}

// md needs to be an instance of markdown-it (in our case, the one used by mavonEditor)
module.exports = (md) => {
  md
    .use(...createContainer('tip', 'TIP') )
    .use(...createContainer('warning', 'WARNING') )
    .use(...createContainer('danger', 'WARNING') )
}

To create your own custom container that you can style how you like, just create another one like: .use(...createContainer('custom', 'defaultTitle'))

Now you can style is with .custom margin: 1em etc.

Update: just noticed Vue has updated custom containers to explicitly escape Vue syntax - follow the link and see if you also need that for your own custom containers.

[lunaceee]

@GrayedFox I can't seem to open the link you attached anymore, could you please explain a bit more about how you implemented this in your code? Where shall I add the function? I'm new to VuePress, thanks!

[Shigma]

@lunaceee For now you can try @vuepress/plugin-container.

[lunaceee]

Thanks @Shigma Didn't realize it's part of the 1.x feature. :)

[lunaceee]

@Shigma I installed the plugin, got the type working but the container doesn't seem to have any style. What's the expected behavior?

[Shigma]

@lunaceee

Our default theme has provided styles for tip, warnging and danger. You can use them.

If you want to define your own custom blocks, you should provide styles by yourself.

See: https://github.com/vuejs/vuepress/blob/master/packages/%40vuepress/theme-default/styles/custom-blocks.styl

[germanbobadilla]

I'm stuck here. I've installed the plugin, used it in config, but still. It doesn't work. I don't know what I'm doing wrong. Look:

['@vuepress-plugin-container', {
          type: 'warning',          
          defaultTitle: 'WARNING',
        }],
        ['@vuepress-plugin-container', {
          type: 'tip',          
          defaultTitle: 'TIP',
        }],
        ['@vuepress-plugin-container', {
          type: 'theorem',
          before: tip => `<div class="theorem"><p class="title">${tip}</p>`,
          after: '</div>',
        }],

[ludanxer]

Hi @germanbobadilla ,You don't need to manually install nor config vuepress-plugin-container if you are using the default theme. Can you share your repo or provide a minimal reproduction?