Merge pull request #20 from vue-styleguidist/docs-show-code-copy

docs: show how to use the copy plugin when wanted

Author: elevatebart

README.md

@@ -19,10 +19,8 @@ yarn add -D vuepress-plugin-live
 //.vuepress/config.js
 module.exports = {
   //...
-  plugins: [
-    ["live"],
-  ]
-}
+  plugins: [["live"]],
+};
 ```
 
 ## Usage
@@ -33,3 +31,52 @@ In your markdown file just add a `live` flag to your fenced code blocks.
 <button>example</button>
 ```
 </code></pre>
+
+## Options
+
+### noSsr
+
+Avoid server side rendering the components in components if they are not ssr ready. Remember that vuepress build pre-compiles the html pages you need.
+
+#### default
+
+`false`
+
+#### example
+
+```js
+//.vuepress/config.js
+module.exports = {
+  //...
+  plugins: [["live", { noSsr: true }]],
+};
+```
+
+### liveFilter
+
+Allows users of theis plugin to say what fenced blocks will be rendered with vue-live.
+
+#### default
+
+```js
+(lang) => / live$/.test(lang) && / live /.test(lang);
+```
+
+#### example
+
+```js
+//.vuepress/config.js
+module.exports = {
+  //...
+  plugins: [
+    [
+      "live",
+      {
+        liveFilter(lang) {
+          return ["vue", "js", "jsx"].includes(lang);
+        },
+      },
+    ],
+  ],
+};
+```

docs/.vuepress/config.js

@@ -8,27 +8,28 @@ module.exports = {
     editLinks: true,
     docsDir: "docs",
     search: false,
-    sidebar: ["/", "/Install.md"]
+    sidebar: ["/", "/Install.md"],
   },
   plugins: [
+    ["code-copy", { selector: `div:not(.editor)[class*="language-"] pre` }],
     [
       require("../../index"),
       {
         // uncomment next line to use a custom layout
         // layout: path.resolve(__dirname, "./components/custom-layout.vue"),
-        noSsr: true
-      }
+        noSsr: true,
+      },
     ],
     [
       "@vuepress/register-components",
       {
         components: [
           {
             name: "vue-slider",
-            path: path.resolve(__dirname, "../vue-slider")
-          }
-        ]
-      }
-    ]
-  ]
+            path: path.resolve(__dirname, "../vue-slider"),
+          },
+        ],
+      },
+    ],
+  ],
 };

markDownPlugin.js

@@ -2,19 +2,23 @@ const { parseComponent } = require("vue-template-compiler");
 const { isCodeVueSfc } = require("vue-inbrowser-compiler");
 const getImports = require("./getImports");
 
-const addVueLive = ({ noSsr }) => md => {
+const addVueLive = ({ noSsr, liveFilter }) => (md) => {
   const fence = md.renderer.rules.fence;
   md.renderer.rules.fence = (...args) => {
     const [tokens, idx] = args;
     const token = tokens[idx];
     const lang = token.info.trim();
 
     // if it does not ends with live just use default fence
-    if (!/ live$/.test(lang) && !/ live /.test(lang)) {
+    if (
+      liveFilter
+        ? !liveFilter(lang)
+        : !/ live$/.test(lang) && !/ live /.test(lang)
+    ) {
       return fence(...args);
     }
 
-    const getScript = code => {
+    const getScript = (code) => {
       // script is at the beginning of a line after a return
       // In case we are loading a vue component as an example, extract script tag
       if (isCodeVueSfc(code)) {
@@ -32,14 +36,16 @@ const addVueLive = ({ noSsr }) => md => {
     // put all requires into a "requires" object
     // add this as a prop
     const scr = getScript(code);
-    const requires = getImports(scr).map(mod => `'${mod}': require('${mod}')`);
+    const requires = getImports(scr).map(
+      (mod) => `'${mod}': require('${mod}')`
+    );
     const langArray = lang.split(" ");
     const langClean = langArray[0];
     const codeClean = md.utils
       .escapeHtml(code)
       .replace(/\`/g, "\\`")
       .replace(/\$/g, "\\$");
-    const editorProps = langArray.find(l => /^\{.+\}$/.test(l));
+    const editorProps = langArray.find((l) => /^\{.+\}$/.test(l));
     const jsx = langArray.length > 2 && langArray[1] === "jsx" ? "jsx " : ""; // to enable jsx, we want ```vue jsx live or ```jsx jsx live
     const markdownGenerated = `<vue-live ${jsx}
       :layoutProps="{lang:'${langClean}'}" 

package-lock.json

@@ -28,6 +28,7 @@
   "devDependencies": {
     "@vuepress/plugin-register-components": "^1.0.3",
     "lodash": "^4.17.11",
+    "lodash.throttle": "^4.1.1",
     "remark": "^10.0.1",
     "unist-util-visit": "^1.4.0",
     "validate-commit-msg": "^2.14.0",