feat: allow usage of lineNumbers in editor

Author: elevatebart

docs/README.md

@@ -48,7 +48,7 @@ let value = 72
 
 You can even require external libraries in your examples.
 
-```vue-hybrid live
+```vue-hybrid live {lineNumbers:true}
 const _ = require("lodash")
 const anu = [2, 5, 7]
 const newArray = []

layout.vue

@@ -25,6 +25,11 @@
 .preview-code .editor .prism-editor-wrapper {
   height: 100%;
 }
+
+.preview-code .editor .prism-editor-wrapper > .prism-editor__line-numbers {
+  position: absolute;
+}
+
 .preview-code .editor pre {
   margin: 0;
   box-sizing: border-box;

markDownPlugin.js

@@ -10,7 +10,7 @@ const addVueLive = md => {
     const lang = token.info.trim();
 
     // if it does not ends with live just use default fence
-    if (!/ live$/.test(lang)) {
+    if (!/ live$/.test(lang) && !/ live /.test(lang)) {
       return fence(...args);
     }
 
@@ -34,11 +34,15 @@ const addVueLive = md => {
     const requires = getImports(scr).map(mod => `'${mod}': require('${mod}')`);
     const langArray = lang.split(" ");
     const langClean = langArray[0];
-    const jsx = langArray.length > 2 && langArray[1] === "jsx" ? "jsx " : ""; // to enable jsx, we want ```vue jsx live or ```jsx jsx live
-    return `<vue-live ${jsx}:layoutProps="{lang:'${langClean}'}" :code="\`${md.utils
+    const codeClean = md.utils
       .escapeHtml(code)
       .replace(/\`/g, "\\`")
-      .replace(/\$/g, "\\$")}\`" :requires="{${requires.join(",")}}"/>`;
+      .replace(/\$/g, "\\$");
+    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
+    return `<vue-live ${jsx}:layoutProps="{lang:'${langClean}'}" :code="\`${codeClean}\`" :requires="{${requires.join(
+      ","
+    )}}"${editorProps ? ` :editorProps="${editorProps}"` : ""} />`;
   };
 };