feat: add code demo

Author: zyao89

package.json

@@ -74,6 +74,7 @@
         "svgo": "^1.3.2",
         "svgo-loader": "^2.2.2",
         "vuepress": "^1.8.2",
+        "vuepress-plugin-demo-container-v2": "^2.3.4",
         "vuepress-plugin-flowchart": "^1.4.3",
         "vuepress-plugin-redirect": "^1.2.5"
     }

src/index.js

@@ -1,6 +1,15 @@
 'use strict';
 
 module.exports = [
-    require('./extends'),
-    require('./commands'),
-];
+    'extends',
+    'commands',
+].map(name => {
+    const item = require(`./${name}`);
+    if (!item.configuration) {
+        item.configuration = {};
+    }
+    if (!item.configuration.alias) {
+        item.configuration.alias = `${name.replace(/\//, '_')}`;
+    }
+    return item;
+});

theme/plugins/markdown/mdCodeResult.js

@@ -4,19 +4,29 @@
 // https://github.com/ravenq/markdown-it-vue/blob/master/src/markdown-it-plugin-echarts.js
 
 module.exports = md => {
+
     const fence = md.renderer.rules.fence.bind(md.renderer.rules);
     md.renderer.rules.fence = (...args) => {
-        const [ tokens, idx ] = args;
+        const [tokens, idx] = args;
         const token = tokens[idx];
-        const rawCode = fence(...args);
-        const lang = token.info.trim();
         const code = token.content;
+
+        const lang = token.info.trim();
+        // 判断该 fence 是否在 :::demo 内
+        const prevToken = tokens[idx - 1];
+        const isInDemoContainer = prevToken && prevToken.nesting === 1 && prevToken.info.trim().match(/^demo\s*(.*)$/);
+
+        const rawCode = fence(...args);
         let mdMyCode = '';
-        if ([ 'vue', 'html' ].includes(lang)) {
+        if (['vue', 'html'].includes(lang) && !isInDemoContainer) {
             mdMyCode = `<CodeResult lang="${lang}" code="${encodeURIComponent(code.trim())}">${code.trim()}</CodeResult>`;
         } else {
             mdMyCode = `<CodeResult lang="${lang}" code="${encodeURIComponent(code.trim())}"></CodeResult>`;
         }
+
+        if (['vue', 'html'].includes(lang) && isInDemoContainer) {
+            mdMyCode = `<template slot="highlight">${mdMyCode}}</template>`;
+        }
         return rawCode.replace('<!--beforeend-->', `${mdMyCode}<!--beforeend-->`);
     };
 };

theme/plugins/register.js

@@ -41,6 +41,9 @@ function registerPlugins(ctx) {
                 '/zh/': '警告',
             },
         }],
+
+        // vue-demo
+        'demo-container-v2',
     ];
 
     const siteConfig = ctx.siteConfig || {};

yarn.lock

@@ -12462,6 +12462,11 @@ [email protected]:
   dependencies:
     "@vuepress/shared-utils" "^1.2.0"
 
+vuepress-plugin-demo-container-v2@^2.3.4:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/vuepress-plugin-demo-container-v2/-/vuepress-plugin-demo-container-v2-2.3.4.tgz#80daef15aca102666fb5429a41dadaf7a0d4fa79"
+  integrity sha512-xyPocP7U8J0BVlStj8fkeT9Z9c/ScUiPgARg+NyPMFrjxC9I3Ae1DfnHs6cJC4zFB1DeyVLzeWuIaP7Q2d9wng==
+
 vuepress-plugin-disqus@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/vuepress-plugin-disqus/-/vuepress-plugin-disqus-0.2.0.tgz#0a5bde424f81e0185eda36fba23d7ac4cae6ff07"