How do I import a third-party markdown-it extension?

[selected-pixel-jameson]

I would like to use the markdown-it extension, markdown-it-container [https://github.com/markdown-it/markdown-it-container] so that I can create my own custom containers besides the ones you already (:::warning, :::tip).

My use case is to create a container for columns like :::column. So I can build multi column layouts.

I'm not sure how I would go about doing this or getting the custom extension enabled and running within vuepress. Currently when I add a custom container flag :::column it does not generate <div class="column"></div> as is stated in the documentation. It instead generates

<p>::: column <em>here be dragons</em> :::</p>

[yzx9]

Seems like you are searching how to extend markdown, extendsMarkdown hook maybe you wanted.

Actually, @vuepress/plugin-container should be able to meet your requirements:

1. Register your component in vue:

https://github.com/vuepress/vuepress-next/blob/e028f887ee9ee10d52abff9e37a9148139372e43/packages/%40vuepress/theme-default/src/client/clientAppEnhance.ts#L12-L14

2. Register @vuepress/plugin-container into your plugins

https://github.com/vuepress/vuepress-next/blob/e028f887ee9ee10d52abff9e37a9148139372e43/packages/%40vuepress/theme-default/src/node/defaultTheme.ts#L56-L78

3. Enjoy it!

[selected-pixel-jameson]

Thank you for your reply.

I believe what I'm looking for is extendsMarkdown. The documentation makes sense, but I have no idea where I would actually implement this? Would it be in theme/index.js or .vuepress/config.js

Thank you again.

[selected-pixel-jameson]

Also, I'm extending the default theme currently. How would I go about implementing clientAppEnhance and registering a plugin?

[yzx9]

The documentation makes sense, but I have no idea where I would actually implement this?

Actually, you need to understand there are two part here: node side and client side, we will compile markdown to vue sfc through markdown-it in node side, so the hook extendsMarkdown should be call in node, like:

module.exports = {
  extendsMarkdown: (md) => {
    md.use(YourMarkdownItPlugin)
  },
}

Would it be in theme/index.js or .vuepress/config.js

Both of them can be used to extend markdown-it, because config.js is actually a special plugin, but we usually put it into a theme/plugin, which will make it easy to publish.

How would I go about implementing clientAppEnhance and registering a plugin?

First of all, you have to understand two part of vuepress I mentioned earlier and clientAppEnchance should be called in client side, this is why you need to write it in a separate file:

// theme/client/ClientAppEnhence.js
import { defineClientAppEnhance } from '@vuepress/client'
export default defineClientAppEnhance(({ app, router, siteData }) => {
  // ...
})

// theme/node/index.js
const { path } = require('@vuepress/utils')
module.exports = {
  clientAppEnhance: path.resolve(__dirname, '../client/ClientAppEnhence.js'),
}

There is a recommend file directory:

layouts
├─ client
|     ├─ ClientAppEnhence.js
|     └─ ClientAppSetup.js
└─ node
      ├─ theme.js
      └─ extendsMarkdown.js