fix: allow ssr usage of vue-live

Author: Bart Ledoux

demo/App.vue

@@ -110,8 +110,6 @@ import codeTemplate from "!!raw-loader!./assets/PureTemplate.html";
 import codeChicago from "!!raw-loader!./assets/Chicago.jsx";
 import all from "./assets/chicagoNeighbourhoods";
 import "prismjs/themes/prism-tomorrow.css";
-//vue-prism-editor dependency
-import "vue-prism-editor/dist/prismeditor.min.css";
 
 import GithubCorners from "vue-github-corners";
 

rollup.config.js

@@ -1,6 +1,7 @@
 import * as path from "path";
 import commonjs from "@rollup/plugin-commonjs";
 import babel from "@rollup/plugin-babel";
+import node from "@rollup/plugin-node-resolve";
 import vue from "rollup-plugin-vue";
 import css from "rollup-plugin-css-only";
 import analyze from "rollup-plugin-analyzer";
@@ -12,6 +13,7 @@ const rootConfig = {
   input: resolve("./src/index.js"),
   plugins: [
     commonjs(),
+    node(),
     babel({
       babelrc: false,
       // avoid using babel.config.js. It kills es6 modules for ie compatibility
@@ -55,6 +57,9 @@ export default [
       file: pkg.main,
       exports: "named", // remove warning about mixed exports
     },
-    plugins: [...rootConfig.plugins, vue({ template: { optimizeSSR: true } })],
+    plugins: [
+      ...rootConfig.plugins,
+      vue({ css: false, template: { optimizeSSR: true } }),
+    ],
   },
 ];

src/Editor.vue

@@ -18,6 +18,7 @@ import "prismjs/components/prism-clike";
 import "prismjs/components/prism-markup";
 import "prismjs/components/prism-javascript";
 import "prismjs/components/prism-jsx";
+import "vue-prism-editor/dist/prismeditor.min.css";
 
 import debounce from "debounce";
 import getScript from "./utils/getScript";
@@ -40,14 +41,20 @@ const highlight = (lang, jsxInExamples) => {
         return scriptCodeHighlighted;
       }
       const templateCode = code.slice(scriptCode.length);
+      const templateHighlighted = prismHighlight(templateCode, languages["html"], lang)
       return (
         scriptCodeHighlighted +
-        prismHighlight(templateCode, languages["html"], lang)
+        templateHighlighted
       );
     };
   } else {
-    const langScheme = languages[lang];
-    return (code) => prismHighlight(code, langScheme, lang);
+    return (code) => {
+      const langScheme = languages[lang];
+      if(!langScheme){
+        return code
+      }
+      return prismHighlight(code, langScheme, lang);
+    }
   }
 };