{{变量}} 编译错误提示修复

kitorv · kitorv · commit 795f1837bb6d · 2021-08-03T22:27:41.000+08:00
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,3 @@
 node_modules
 dist
-lib
-package-lock
-package-lock.json
+lib
diff --git a/README.md b/README.md
@@ -329,8 +329,8 @@ Vue.use(VueUIDocs);
   .vc-snippet--code {
     box-sizing: border-box;
     border-top: 1px solid #ebedf0;
-
-    /deep/ {
+    
+    ::v-deep {
       code {
         background: #f9f9f9;
         font-family: Consolas, Menlo, Courier, monospace;
diff --git a/build/markdown-loader.js b/build/markdown-loader.js
@@ -2,28 +2,36 @@ const MarkdownIt = require("markdown-it");
 const MarkdownItContainer = require("markdown-it-container");
 const VueTemplateComplier = require("vue-template-compiler");
 const hljs = require("highlight.js");
+const hash = require("hash-sum");
 const { parse, compileTemplate } = require("@vue/component-compiler-utils");
 
 module.exports = function(source) {
   // 需要解析成vue代码块集合
   const componentCodeList = [];
   let styleCodeList = [];
+  const delimiterCodeList = [];
   const globalScript = [];
   // 初始还MarkdownIt用于转换md文件为html
   const markdownIt = MarkdownIt({
     html: true,
     xhtmlOut: true,
     // 将markdown中的代码块用hljs高亮显示
-    highlight: function(str, lang) {
-      if (lang && hljs.getLanguage(lang)) {
-        return `<pre class="hljs"><code>${
-          hljs.highlight(lang, str, true).value
-        }</code></pre>`;
+    highlight: function(code, language) {
+      let codeHtml;
+      if (language && hljs.getLanguage(language)) {
+        codeHtml = hljs.highlight(code, { language, ignoreIllegals: true }).value;
+      } else {
+        codeHtml = markdownIt.utils.escapeHtml(code);
       }
-      return `<pre class="hljs"><code>${markdownIt.utils.escapeHtml(
-        str
-      )}</code></pre>`;
-    }
+      // 替换vue的变量分隔符 {{  }} 阻止二次变量编译错误
+      const delimiterRegex = /\{\{.*?\}\}/g;
+      codeHtml = codeHtml.replace(delimiterRegex, (value) => {
+        const code = `data_${hash(value)}`;
+        delimiterCodeList.push(`${code}:"${value}"`);
+        return `{{${code}}}`;
+      });
+      return `<pre class="hljs"><code>${codeHtml}</code></pre>`;
+    },
   });
   // 解析【:::tip:::】
   markdownIt.use(MarkdownItContainer, "tip");
@@ -49,15 +57,15 @@ module.exports = function(source) {
         let { template, script, styles } = parse({
           source: content,
           compiler: VueTemplateComplier,
-          needMap: false
+          needMap: false,
         });
         styleCodeList = styleCodeList.concat(styles);
         // 将template的转为render函数
         let templateCodeRender = "";
         if (template && template.content) {
           const { code } = compileTemplate({
             source: template.content,
-            compiler: VueTemplateComplier
+            compiler: VueTemplateComplier,
           });
           templateCodeRender = code;
         }
@@ -91,7 +99,7 @@ module.exports = function(source) {
       }
       return `    </div>
                 </vc-snippet> `;
-    }
+    },
   });
   // 将所有转换好的代码字符串拼接成vue单组件template、script、style格式
   return `
@@ -106,10 +114,13 @@ module.exports = function(source) {
            name: 'vc-component-doc',
            components: {
             ${componentCodeList.join(",")}
+           },
+           data(){
+            return {${delimiterCodeList.join(",")}}
            }
          }
        </script>
        <style lang='scss'>
-         ${Array.from(styleCodeList, m => m.content).join("\n")}
+         ${Array.from(styleCodeList, (m) => m.content).join("\n")}
        </style>`;
 };
diff --git a/package.json b/package.json
@@ -23,12 +23,12 @@
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-vue": "^6.2.2",
-    "highlight.js": "^9.18.1",
+    "highlight.js": "^11.2.0",
     "lint-staged": "^9.5.0",
     "markdown-it": "^10.0.0",
     "markdown-it-container": "^2.0.0",
-    "node-sass": "^4.12.0",
     "prettier": "^1.19.1",
+    "sass": "^1.37.2",
     "sass-loader": "^8.0.2",
     "vue-template-compiler": "^2.6.11"
   },
diff --git a/site/components/snippet.vue b/site/components/snippet.vue
@@ -96,7 +96,7 @@ export default {
   box-sizing: border-box;
   border-top: 1px solid #ebedf0;
 
-  /deep/ {
+  ::v-deep {
     code {
       background: #f9f9f9;
       font-family: Consolas, Menlo, Courier, monospace;
diff --git a/site/router/index.js b/site/router/index.js
@@ -6,7 +6,6 @@ Vue.use(VueRouter);
 const routes = [
   {
     path: "/",
-    name: "home",
     component: () => import("../views/Home.vue"),
     children: [
       {
diff --git a/src/button/index.md b/src/button/index.md
@@ -37,12 +37,15 @@
 ```html
 <template>
   <div>
-    <v-button text="Default" @click="handleButtonClick"></v-button>
+    <v-button @click="handleButtonClick">{{text}}</v-button>
   </div>
 </template>
 
 <script>
   export default {
+    data() {
+      return { text: "Default" };
+    },
     methods: {
       handleButtonClick() {
         alert(1);

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,6 @@ Vue.use(VueRouter);`
`6`	`6`	`const routes = [`
`7`	`7`	`{`
`8`	`8`	`path: "/",`
`9`		`- name: "home",`
`10`	`9`	`component: () => import("../views/Home.vue"),`
`11`	`10`	`children: [`
`12`	`11`	`{`