style: show the language badge in text boxes

Author: Barthelemy Ledoux

layout.vue

@@ -3,7 +3,7 @@
     <div class="preview block">
       <slot name="preview"></slot>
     </div>
-    <div :class="`language-${props.language} editor block`">
+    <div :class="`language-${props.lang} editor block`">
       <slot name="editor"></slot>
     </div>
   </div>

markDownPlugin.js

@@ -32,8 +32,8 @@ const addVueLive = md => {
     // add this as a prop
     const scr = getScript(code);
     const requires = getImports(scr).map(mod => `'${mod}': require('${mod}')`);
-
-    return `<vue-live :code="\`${md.utils
+    const langClean = lang.split(" ")[0];
+    return `<vue-live :layoutProps="{lang:'${langClean}'}" :code="\`${md.utils
       .escapeHtml(code)
       .replace(/\`/g, "\\`")
       .replace(/\$/g, "\\$")}\`" :requires="{${requires.join(",")}}"/>`;

package-lock.json

@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "acorn": "^6.1.1",
-    "vue-live": "^1.3.0",
+    "vue-live": "^1.4.1",
     "walkes": "^0.2.1"
   }
 }