diff --git a/packages/@vuepress/markdown/index.js b/packages/@vuepress/markdown/index.js index cc8d09fb40..60af7ca865 100644 --- a/packages/@vuepress/markdown/index.js +++ b/packages/@vuepress/markdown/index.js @@ -14,7 +14,6 @@ const lineNumbersPlugin = require('./lib/lineNumbers') const componentPlugin = require('./lib/component') const hoistScriptStylePlugin = require('./lib/hoist') const convertRouterLinkPlugin = require('./lib/link') -const containersPlugin = require('./lib/containers') const markdownSlotsContainersPlugin = require('./lib/markdownSlotsContainers') const snippetPlugin = require('./lib/snippet') const emojiPlugin = require('markdown-it-emoji') @@ -75,10 +74,6 @@ module.exports = (markdown = {}) => { .use(hoistScriptStylePlugin) .end() - .plugin(PLUGINS.CONTAINERS) - .use(containersPlugin) - .end() - .plugin(PLUGINS.MARKDOWN_SLOTS_CONTAINERS) .use(markdownSlotsContainersPlugin) .end() diff --git a/packages/@vuepress/markdown/lib/containers.js b/packages/@vuepress/markdown/lib/containers.js deleted file mode 100644 index 0ee6be8037..0000000000 --- a/packages/@vuepress/markdown/lib/containers.js +++ /dev/null @@ -1,33 +0,0 @@ -const container = require('markdown-it-container') - -module.exports = md => { - md - .use(...createContainer('tip', 'TIP')) - .use(...createContainer('warning', 'WARNING')) - .use(...createContainer('danger', 'WARNING')) - // explicitly escape Vue syntax - .use(container, 'v-pre', { - render: (tokens, idx) => tokens[idx].nesting === 1 - ? `
\n` - : `
\n` - }) - .use(container, 'vue', { - render: (tokens, idx) => tokens[idx].nesting === 1 - ? `
`
-        : `
` - }) -} - -function createContainer (klass, defaultTitle) { - return [container, klass, { - render (tokens, idx) { - const token = tokens[idx] - const info = token.info.trim().slice(klass.length).trim() - if (token.nesting === 1) { - return `

${info || defaultTitle}

\n` - } else { - return `
\n` - } - } - }] -} diff --git a/packages/@vuepress/markdown/package.json b/packages/@vuepress/markdown/package.json index 196639d6ba..14607ebad2 100644 --- a/packages/@vuepress/markdown/package.json +++ b/packages/@vuepress/markdown/package.json @@ -24,7 +24,6 @@ "markdown-it": "^8.4.1", "markdown-it-anchor": "^5.0.2", "markdown-it-chain": "^1.3.0", - "markdown-it-container": "^2.0.0", "markdown-it-emoji": "^1.4.0", "markdown-it-table-of-contents": "^0.4.0", "prismjs": "^1.13.0" diff --git a/packages/@vuepress/plugin-container/.npmignore b/packages/@vuepress/plugin-container/.npmignore new file mode 100644 index 0000000000..13c38ea313 --- /dev/null +++ b/packages/@vuepress/plugin-container/.npmignore @@ -0,0 +1,3 @@ +__tests__ +__mocks__ +.temp diff --git a/packages/@vuepress/plugin-container/README.md b/packages/@vuepress/plugin-container/README.md new file mode 100644 index 0000000000..fc0b2211d2 --- /dev/null +++ b/packages/@vuepress/plugin-container/README.md @@ -0,0 +1,5 @@ +# @vuepress/plugin-container + +> markdown container plugin for vuepress + +See [documentation](https://vuepress.vuejs.org/plugin/official/plugin-container.html). diff --git a/packages/@vuepress/plugin-container/index.js b/packages/@vuepress/plugin-container/index.js new file mode 100644 index 0000000000..4715ae046a --- /dev/null +++ b/packages/@vuepress/plugin-container/index.js @@ -0,0 +1,48 @@ +const container = require('markdown-it-container') + +function call (target, ...args) { + if (typeof target === 'function') { + return target(...args) + } else { + return target + } +} + +module.exports = (options, context) => ({ + multiple: true, + + extendMarkdown (md) { + const { + validate, + marker, + before, + after, + type = '', + defaultTitle = type.toUpperCase() + } = options + if (!type) return + + let { render } = options + if (!render) { + if (before !== undefined && after !== undefined) { + render = (tokens, index) => { + const token = tokens[index] + return token.nesting === 1 ? call(before, token) : call(after, token) + } + } else { + render = (tokens, index) => { + const token = tokens[index] + let title = token.info.trim().slice(type.length).trim() || defaultTitle + if (title) title = `

${title}

` + if (token.nesting === 1) { + return `
${title}\n` + } else { + return `
\n` + } + } + } + } + + md.use(container, type, { render, validate, marker }) + } +}) diff --git a/packages/@vuepress/plugin-container/package.json b/packages/@vuepress/plugin-container/package.json new file mode 100644 index 0000000000..4dfb8d3b19 --- /dev/null +++ b/packages/@vuepress/plugin-container/package.json @@ -0,0 +1,29 @@ +{ + "name": "@vuepress/plugin-container", + "version": "1.0.0-alpha.40", + "description": "markdown container plugin for vuepress", + "main": "index.js", + "publishConfig": { + "access": "public" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/vuejs/vuepress.git", + "directory": "packages/@vuepress/plugin-container" + }, + "keywords": [ + "documentation", + "vue", + "vuepress", + "generator" + ], + "dependencies": { + "markdown-it-container": "^2.0.0" + }, + "author": "Shigma <1700011071@pku.edu.cn>", + "license": "MIT", + "bugs": { + "url": "https://github.com/vuejs/vuepress/issues" + }, + "homepage": "https://github.com/vuejs/vuepress/packages/@vuepress/plugin-container#readme" +} diff --git a/packages/@vuepress/theme-default/index.js b/packages/@vuepress/theme-default/index.js index 3cafe568c0..0f214621ce 100644 --- a/packages/@vuepress/theme-default/index.js +++ b/packages/@vuepress/theme-default/index.js @@ -20,6 +20,14 @@ module.exports = (options, ctx) => ({ plugins: [ '@vuepress/active-header-links', '@vuepress/search', - '@vuepress/plugin-nprogress' + '@vuepress/plugin-nprogress', + ['@vuepress/container', { type: 'tip' }], + ['@vuepress/container', { type: 'warning' }], + ['@vuepress/container', { type: 'danger' }], + ['@vuepress/container', { + type: 'v-pre', + before: '
\n', + after: '
\n' + }] ] }) diff --git a/packages/docs/docs/.vuepress/config.js b/packages/docs/docs/.vuepress/config.js index b56d1334ed..e1a7e0466a 100755 --- a/packages/docs/docs/.vuepress/config.js +++ b/packages/docs/docs/.vuepress/config.js @@ -1,4 +1,4 @@ -const container = require('markdown-it-container') +const { fs, path } = require('@vuepress/shared-utils') module.exports = ctx => ({ dest: '../../vuepress', @@ -74,14 +74,17 @@ module.exports = ctx => ({ ['@vuepress/google-analytics', { ga: 'UA-128189152-1' }], + ['@vuepress/container', { + type: 'vue', + before: '
',
+      after: '
', + }], + ['@vuepress/container', { + type: 'upgrade', + before: ({ info }) => ``, + after: '', + }], ], - extendMarkdown (md) { - md.use(container, 'upgrade', { - render: (tokens, idx) => tokens[idx].nesting === 1 - ? `` - : '' - }) - }, }) function getGuideSidebar (groupA, groupB) { @@ -114,6 +117,10 @@ function getGuideSidebar (groupA, groupB) { ] } +const officalPlugins = fs + .readdirSync(path.resolve(__dirname, '../plugin/official')) + .map(filename => 'official/' + filename.slice(0, -3)) + function getPluginSidebar (pluginTitle, pluginIntro, officialPluginTitle) { return [ { @@ -131,20 +138,7 @@ function getPluginSidebar (pluginTitle, pluginIntro, officialPluginTitle) { { title: officialPluginTitle, collapsable: false, - children: [ - 'official/plugin-search', - 'official/plugin-active-header-links', - 'official/plugin-pwa', - 'official/plugin-blog', - 'official/plugin-pagination', - 'official/plugin-google-analytics', - 'official/plugin-i18n-ui', - 'official/plugin-last-updated', - 'official/plugin-medium-zoom', - 'official/plugin-back-to-top', - 'official/plugin-register-components', - 'official/plugin-clean-urls' - ] + children: officalPlugins, } ] } diff --git a/packages/docs/docs/plugin/official/plugin-container.md b/packages/docs/docs/plugin/official/plugin-container.md new file mode 100644 index 0000000000..359f3a98cf --- /dev/null +++ b/packages/docs/docs/plugin/official/plugin-container.md @@ -0,0 +1,80 @@ +--- +title: container +metaTitle: A plugin of registering markdown containers | VuePress +--- + +# [@vuepress/plugin-container](https://github.com/vuejs/vuepress/tree/master/packages/@vuepress/plugin-container) + +> A plugin of registering markdown containers + +## Install + +```bash +yarn add -D @vuepress/plugin-container +# OR npm install -D @vuepress/plugin-container +``` + +## Usage + +```javascript +module.exports = { + plugins: ['@vuepress/container'] +} +``` + +## Options + +### type + +- Type: `string` +- This is a required option. + +The type for the container. For example, if `type` was set to `foo`, only the following syntax will be parsed as a container: + +```md +::: foo bar +write something here ~ +::: +``` + +### defaultTitle + +- Type: `string` +- Default: the upper case of `type` + +The default title for the container. If no title was provided, `defaultTitle` will be showed as the title of the container. + +### before + +- Type: `string | Function` +- Default: `undefined` + +String to be placed before the block. If specified as a function, a argument `token` will be passed to it. If specified, it will override `defaultTitle`. + +### after + +- Type: `string | Function` +- Default: `undefined` + +String to be placed after the block. If specified as a function, a argument `token` will be passed to it. If specified, it will override `defaultTitle`. + +### validate + +- Type: `Function` +- Default: `undefined` + +A function to validate tail after opening marker, should return `true` on success. + +### render + +- Type: `Function` +- Default: `undefined` + +The renderer function for opening/closing tokens. If specified, it will override `before`, `after` and `defaultTitle`. + +### marker + +- Type: `string` +- Default: `':'` + +The character to use in delimiter. diff --git a/packages/docs/docs/zh/plugin/official/plugin-container.md b/packages/docs/docs/zh/plugin/official/plugin-container.md new file mode 100644 index 0000000000..ed29cccc7a --- /dev/null +++ b/packages/docs/docs/zh/plugin/official/plugin-container.md @@ -0,0 +1,80 @@ +--- +title: container +metaTitle: Markdown 容器插件 | VuePress +--- + +# [@vuepress/plugin-container](https://github.com/vuejs/vuepress/tree/master/packages/@vuepress/plugin-container) + +> Markdown 容器插件 + +## 安装 + +```bash +yarn add -D @vuepress/plugin-container +# OR npm install -D @vuepress/plugin-container +``` + +## 使用 + +```javascript +module.exports = { + plugins: ['@vuepress/container'] +} +``` + +## 选项 + +### type + +- 类型: `string` +- 这是一个必需的选项 + +容器的类型。举个例子,如果 `type` 被设置为 `foo`,则仅有下面的语法会被视为对应的容器: + +```md +::: foo bar +随便写点啥 ~ +::: +``` + +### defaultTitle + +- 类型: `string` +- 默认值: `type` 的大写形式 + +容器的默认标题。如果没有提供标题,则会使用 `defaultTitle` 作为容器的标题。 + +### before + +- 类型: `string | Function` +- 默认值: `undefined` + +要插入在容器前的 HTML。如果设置为一个函数,将传入当前的 `token` 作为第一个参数。如果设置了这个值,它将覆盖 `defaultTitle` 的效果。 + +### after + +- 类型: `string | Function` +- 默认值: `undefined` + +要插入在容器后的 HTML。如果设置为一个函数,将传入当前的 `token` 作为第一个参数。如果设置了这个值,它将覆盖 `defaultTitle` 的效果。 + +### validate + +- 类型: `Function` +- 默认值: `undefined` + +一个用于判定容器是否结束的函数。当认定容器范围结束时应返回一个 `true`。 + +### render + +- 类型: `Function` +- 默认值: `undefined` + +容器开头和结束 token 的渲染函数。如果设置了这个值,它将覆盖 `before`, `after` 和 `defaultTitle` 的效果。 + +### marker + +- 类型: `string` +- 默认值: `':'` + +用于分隔符的字符。