diff --git a/demo/App.vue b/demo/App.vue
index d2c8aae..bd74e4a 100644
--- a/demo/App.vue
+++ b/demo/App.vue
@@ -111,7 +111,7 @@ 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/VuePrismEditor.css";
+import "vue-prism-editor/dist/prismeditor.min.css";
 
 import GithubCorners from "vue-github-corners";
 
@@ -152,10 +152,11 @@ body {
   background-color: #ded;
 }
 
-body .prism-editor__line-numbers {
-  box-sizing: border-box;
+.prism-editor-wrapper {
+  background-color: #222;
+  color: #eee;
+  padding: 8px 12px;
 }
-
 .separate {
   display: flex;
   flex-direction: column;
diff --git a/package-lock.json b/package-lock.json
index 9bc80dc..b44d474 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4579,9 +4579,14 @@
       }
     },
     "acorn": {
-      "version": "6.4.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
-      "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA=="
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.0.tgz",
+      "integrity": "sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w=="
+    },
+    "acorn-dynamic-import": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz",
+      "integrity": "sha512-d3OEjQV4ROpoflsnUA8HozoIR504TFxNivYEUi6uwz0IYhBkTDXGuWlNdMtybRt3nqVx/L6XqMt0FxkXuWKZhw=="
     },
     "acorn-globals": {
       "version": "4.3.4",
@@ -4591,13 +4596,20 @@
       "requires": {
         "acorn": "^6.0.1",
         "acorn-walk": "^6.0.1"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "6.4.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
+          "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==",
+          "dev": true
+        }
       }
     },
     "acorn-jsx": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.2.0.tgz",
-      "integrity": "sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==",
-      "dev": true
+      "integrity": "sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ=="
     },
     "acorn-walk": {
       "version": "6.2.0",
@@ -6392,16 +6404,6 @@
           "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
           "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA=="
         },
-        "acorn-dynamic-import": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz",
-          "integrity": "sha512-d3OEjQV4ROpoflsnUA8HozoIR504TFxNivYEUi6uwz0IYhBkTDXGuWlNdMtybRt3nqVx/L6XqMt0FxkXuWKZhw=="
-        },
-        "acorn-jsx": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.0.1.tgz",
-          "integrity": "sha512-HJ7CfNHrfJLlNTzIEUTj43LNWGkqpRLxm3YjAlcD0ACydk9XynzYsCBHxut+iqt+1aBXkx9UP/w/ZqMr13XIzg=="
-        },
         "os-homedir": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-2.0.0.tgz",
@@ -7188,9 +7190,9 @@
       "dev": true
     },
     "clipboard": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.4.tgz",
-      "integrity": "sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ==",
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.6.tgz",
+      "integrity": "sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==",
       "optional": true,
       "requires": {
         "good-listener": "^1.2.2",
@@ -7358,16 +7360,6 @@
       "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==",
       "dev": true
     },
-    "component-props": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/component-props/-/component-props-1.1.1.tgz",
-      "integrity": "sha1-+bffm5kntubZfJvScqqGdnDzSUQ="
-    },
-    "component-xor": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/component-xor/-/component-xor-0.0.4.tgz",
-      "integrity": "sha1-xV2DzMG5TNUImk6T+niRxyY+Wao="
-    },
     "compressible": {
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
@@ -8303,6 +8295,12 @@
           "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
           "dev": true
         },
+        "lodash": {
+          "version": "4.17.15",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
+          "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
+          "dev": true
+        },
         "minimist": {
           "version": "1.2.0",
           "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
@@ -8754,15 +8752,6 @@
       "integrity": "sha512-2G2Vwi2zXTHBGqXHsJ4+ak/iP0N8Ar+G8a7LiD2oup5o4sQWytwqqrZu/O6hIMV0KMID2PL69OhpshLO0n7UJQ==",
       "dev": true
     },
-    "dom-iterator": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/dom-iterator/-/dom-iterator-1.0.0.tgz",
-      "integrity": "sha512-7dsMOQI07EMU98gQM8NSB3GsAiIeBYIPKpnxR3c9xOvdvBjChAcOM0iJ222I3p5xyiZO9e5oggkNaCusuTdYig==",
-      "requires": {
-        "component-props": "1.1.1",
-        "component-xor": "0.0.4"
-      }
-    },
     "dom-serializer": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@@ -8931,9 +8920,9 @@
       "dev": true
     },
     "elliptic": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.2.tgz",
-      "integrity": "sha512-f4x70okzZbIQl/NSRLkI/+tteV/9WqL98zx+SQ69KbXxmVrmjwsNUPn/gYJJ0sHvEak24cZgHIPegRePAtA/xw==",
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz",
+      "integrity": "sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==",
       "dev": true,
       "requires": {
         "bn.js": "^4.4.0",
@@ -9078,7 +9067,8 @@
     "escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
+      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=",
+      "dev": true
     },
     "escape-string-regexp": {
       "version": "1.0.5",
@@ -11791,7 +11781,8 @@
     "is-extendable": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
-      "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik="
+      "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=",
+      "dev": true
     },
     "is-extglob": {
       "version": "2.1.1",
@@ -13502,9 +13493,9 @@
       }
     },
     "lodash": {
-      "version": "4.17.15",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
-      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
+      "version": "4.17.19",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
+      "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ=="
     },
     "lodash.defaultsdeep": {
       "version": "4.6.1",
@@ -15822,9 +15813,9 @@
       }
     },
     "prismjs": {
-      "version": "1.17.1",
-      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.17.1.tgz",
-      "integrity": "sha512-PrEDJAFdUGbOP6xK/UsfkC5ghJsPJviKgnQOoxaDbBjwc8op68Quupwt1DeAFoG8GImPhiKXAvvsH7wDSLsu1Q==",
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.21.0.tgz",
+      "integrity": "sha512-uGdSIu1nk3kej2iZsLyDoJ7e9bnPzIgY0naW/HdknGj61zScaprVEVGHrPoXqI+M9sP0NDnTK2jpkvmldpuqDw==",
       "requires": {
         "clipboard": "^2.0.0"
       }
@@ -16404,9 +16395,9 @@
       "integrity": "sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg=="
     },
     "regenerate-unicode-properties": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-8.1.0.tgz",
-      "integrity": "sha512-LGZzkgtLY79GeXLm8Dp0BVLdQlWICzBnJz/ipWUgo59qBaZ+BHtq51P2q1uVZlppMuUAT37SDk39qUbjTWB7bA==",
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz",
+      "integrity": "sha512-F9DjY1vKLo/tPePDycuH3dn9H1OTPIkVD9Kz4LODu+F2C75mgjAJ7x/gwy6ZcSNRAAkhNlJSOHRe8k3p+K9WhA==",
       "requires": {
         "regenerate": "^1.4.0"
       }
@@ -16454,27 +16445,27 @@
       "dev": true
     },
     "regexpu-core": {
-      "version": "4.5.4",
-      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.5.4.tgz",
-      "integrity": "sha512-BtizvGtFQKGPUcTy56o3nk1bGRp4SZOTYrDtGNlqCQufptV5IkkLN6Emw+yunAJjzf+C9FQFtvq7IoA3+oMYHQ==",
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.7.0.tgz",
+      "integrity": "sha512-TQ4KXRnIn6tz6tjnrXEkD/sshygKH/j5KzK86X8MkeHyZ8qst/LZ89j3X4/8HEIfHANTFIP/AbXakeRhWIl5YQ==",
       "requires": {
         "regenerate": "^1.4.0",
-        "regenerate-unicode-properties": "^8.0.2",
-        "regjsgen": "^0.5.0",
-        "regjsparser": "^0.6.0",
+        "regenerate-unicode-properties": "^8.2.0",
+        "regjsgen": "^0.5.1",
+        "regjsparser": "^0.6.4",
         "unicode-match-property-ecmascript": "^1.0.4",
-        "unicode-match-property-value-ecmascript": "^1.1.0"
+        "unicode-match-property-value-ecmascript": "^1.2.0"
       }
     },
     "regjsgen": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.5.0.tgz",
-      "integrity": "sha512-RnIrLhrXCX5ow/E5/Mh2O4e/oa1/jW0eaBKTSy3LaCj+M3Bqvm97GWDp2yUtzIs4LEn65zR2yiYGFqb2ApnzDA=="
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.5.2.tgz",
+      "integrity": "sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A=="
     },
     "regjsparser": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.0.tgz",
-      "integrity": "sha512-RQ7YyokLiQBomUJuUG8iGVvkgOLxwyZM8k6d3q5SAXpg4r5TZJZigKFvC6PpD+qQ98bCDC5YelPeA3EucDoNeQ==",
+      "version": "0.6.4",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.4.tgz",
+      "integrity": "sha512-64O87/dPDgfk8/RQqC4gkZoGyyWFIEUTTh80CU6CWuK5vkCGyekIx+oKcEIYtP/RAxSQltCZHCNu/mdd7fqlJw==",
       "requires": {
         "jsesc": "~0.5.0"
       },
@@ -18686,24 +18677,6 @@
       "dev": true,
       "optional": true
     },
-    "unescape": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/unescape/-/unescape-1.0.1.tgz",
-      "integrity": "sha512-O0+af1Gs50lyH1nUu3ZyYS1cRh01Q/kUKatTOkSs7jukXE6/NebucDVxyiDsA9AQ4JC1V1jUH9EO8JX2nMDgGQ==",
-      "requires": {
-        "extend-shallow": "^2.0.1"
-      },
-      "dependencies": {
-        "extend-shallow": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-          "requires": {
-            "is-extendable": "^0.1.0"
-          }
-        }
-      }
-    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
@@ -18719,9 +18692,9 @@
       }
     },
     "unicode-match-property-value-ecmascript": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.1.0.tgz",
-      "integrity": "sha512-hDTHvaBk3RmFzvSl0UVrUmC3PuW9wKVnpoUDYH0JDkSIovzw+J5viQmeYHxVSBptubnr7PbH2e0fnpDRQnQl5g=="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.2.0.tgz",
+      "integrity": "sha512-wjuQHGQVofmSJv1uVISKLE5zO2rNGzM/KCYZch/QQvez7C1hUhBIuZ701fYXExuufJFMPhv2SyL8CyoIfMLbIQ=="
     },
     "unicode-property-aliases-ecmascript": {
       "version": "1.0.5",
@@ -19134,14 +19107,15 @@
       "dev": true
     },
     "vue-inbrowser-compiler": {
-      "version": "3.21.0",
-      "resolved": "https://registry.npmjs.org/vue-inbrowser-compiler/-/vue-inbrowser-compiler-3.21.0.tgz",
-      "integrity": "sha512-4/Mhzso74b+mwjD4rd8LT5GQtPy6AQ6g8bA2WtgCtSHTvMXAPeyyZftKTe7pNb1OJbOhOODTAKi6d2V+GSVnQg==",
+      "version": "4.27.0",
+      "resolved": "https://registry.npmjs.org/vue-inbrowser-compiler/-/vue-inbrowser-compiler-4.27.0.tgz",
+      "integrity": "sha512-P57562nGgzlF5YY53XKCtgDtjGwFVEzUyOomilzMIluhg9LGHeMgSlQZcWcSI39xyTrEPKwJQLTvTUOHXLjVZg==",
       "requires": {
         "acorn": "^6.1.1",
         "acorn-jsx": "^5.0.1",
         "buble": "^0.19.7",
         "camelcase": "^5.3.1",
+        "vue-inbrowser-compiler-utils": "^4.27.0",
         "walkes": "^0.2.1"
       },
       "dependencies": {
@@ -19149,14 +19123,17 @@
           "version": "6.4.1",
           "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
           "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA=="
-        },
-        "acorn-jsx": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.0.1.tgz",
-          "integrity": "sha512-HJ7CfNHrfJLlNTzIEUTj43LNWGkqpRLxm3YjAlcD0ACydk9XynzYsCBHxut+iqt+1aBXkx9UP/w/ZqMr13XIzg=="
         }
       }
     },
+    "vue-inbrowser-compiler-utils": {
+      "version": "4.27.0",
+      "resolved": "https://registry.npmjs.org/vue-inbrowser-compiler-utils/-/vue-inbrowser-compiler-utils-4.27.0.tgz",
+      "integrity": "sha512-NnsvgVQ0piyHO89RNjqyE/VrvFApItR5wHwYXjXwYVKSG6sx6ZyzAYhdW7JYC0rFoBz+kuTxdddDBDynnMEsCA==",
+      "requires": {
+        "camelcase": "^5.3.1"
+      }
+    },
     "vue-jest": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/vue-jest/-/vue-jest-3.0.5.tgz",
@@ -19197,14 +19174,9 @@
       }
     },
     "vue-prism-editor": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/vue-prism-editor/-/vue-prism-editor-0.3.0.tgz",
-      "integrity": "sha512-yNSuwql/xHMJrWghn/OhZ5WPBKdhx7FkvFjgq2uDm99jHSJhuGwhcgPyuoGzpm6w8DRDzi85lgerKCu8DTDWWg==",
-      "requires": {
-        "dom-iterator": "^1.0.0",
-        "escape-html": "^1.0.3",
-        "unescape": "^1.0.1"
-      }
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/vue-prism-editor/-/vue-prism-editor-1.0.1.tgz",
+      "integrity": "sha512-94/TX0gXpA5ZymAoJZ5nXPZhx0Q3Eio/uw1TLYdkDEVMg0Vgmu5O54n9UP3PYnU1zFMInLLXmXpCxbTMn5hTcw=="
     },
     "vue-runtime-helpers": {
       "version": "1.0.1",
@@ -19374,6 +19346,12 @@
         "webpack-sources": "^1.4.1"
       },
       "dependencies": {
+        "acorn": {
+          "version": "6.4.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
+          "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==",
+          "dev": true
+        },
         "schema-utils": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
diff --git a/package.json b/package.json
index ea02d7c..cf6616d 100644
--- a/package.json
+++ b/package.json
@@ -15,14 +15,15 @@
   "dependencies": {
     "@vue/compiler-core": "^3.0.0-beta.10",
     "@vue/compiler-dom": "^3.0.0-beta.10",
-    "acorn": "^6.1.1",
+    "acorn": "^7.4.0",
     "core-js": "^3.6.5",
     "debounce": "^1.2.0",
     "hash-sum": "^2.0.0",
-    "prismjs": "^1.16.0",
+    "prismjs": "^1.21.0",
     "recast": "^0.19.1",
-    "vue-inbrowser-compiler": "^3.21.0",
-    "vue-prism-editor": "^0.3.0"
+    "vue-inbrowser-compiler": "^4.27.0",
+    "vue-inbrowser-compiler-utils": "^4.27.0",
+    "vue-prism-editor": "^1.0.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.3.1",
diff --git a/src/Editor.vue b/src/Editor.vue
index 0ec1199..664d96b 100644
--- a/src/Editor.vue
+++ b/src/Editor.vue
@@ -1,42 +1,81 @@
 <template>
   <PrismEditor
     v-model="stableCode"
-    :language="prismLang"
-    @change="updatePreview"
+    @input="updatePreview"
+    :highlight="highlighter"
     v-bind="editorProps"
   />
 </template>
 
 <script>
-//load prism somewhere
-import "prismjs";
-import "prismjs/components/prism-jsx.min";
+import { PrismEditor } from "vue-prism-editor";
+
+import {
+  highlight as prismHighlight,
+  languages,
+} from "prismjs/components/prism-core";
+import "prismjs/components/prism-clike";
+import "prismjs/components/prism-markup";
+import "prismjs/components/prism-javascript";
+import "prismjs/components/prism-jsx";
 
-import PrismEditor from "vue-prism-editor";
 import debounce from "debounce";
+import getScript from "./utils/getScript";
 
 const UPDATE_DELAY = 300;
 
+const highlight = (lang, jsxInExamples) => {
+  if (lang === "vsg") {
+    return (code) => {
+      if (!code) {
+        return "";
+      }
+      const scriptCode = getScript(code, jsxInExamples);
+      const scriptCodeHighlighted = prismHighlight(
+        scriptCode,
+        languages[jsxInExamples ? "jsx" : "js"],
+        lang
+      );
+      if (code.length === scriptCode.length) {
+        return scriptCodeHighlighted;
+      }
+      const templateCode = code.slice(scriptCode.length);
+      return (
+        scriptCodeHighlighted +
+        prismHighlight(templateCode, languages["html"], lang)
+      );
+    };
+  } else {
+    const langScheme = languages[lang];
+    return (code) => prismHighlight(code, langScheme, lang);
+  }
+};
+
 export default {
-  name: 'VueLiveEditor',
+  name: "VueLiveEditor",
   components: { PrismEditor },
   props: {
     code: {
       type: String,
-      required: true
+      required: true,
     },
     delay: {
       type: Number,
-      default: UPDATE_DELAY
+      default: UPDATE_DELAY,
     },
     editorProps: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     prismLang: {
       type: String,
-      default: 'html'
-    }
+      default: "html",
+      validator: (val) => ["html", "vsg"].includes(val),
+    },
+    jsx: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -46,20 +85,24 @@ export default {
        * it allows for copy and pasting without having the code
        * editor repainted every keystroke
        */
-      stableCode: this.code
-    }
+      stableCode: this.code,
+    };
+  },
+  methods: {
+    highlighter(code) {
+      return highlight(this.prismLang, this.jsx)(code);
+    },
   },
   watch: {
     code(value) {
       this.updatePreview(value);
-    }
+    },
   },
   created() {
-    this.updatePreview = debounce(value => {
+    this.updatePreview = debounce((value) => {
       this.stableCode = value;
-
-      this.$emit('change', value);
-    }, this.delay)
-  }
-}
+      this.$emit("change", value);
+    }, this.delay);
+  },
+};
 </script>
diff --git a/src/Preview.vue b/src/Preview.vue
index f0647a6..62c7c6b 100644
--- a/src/Preview.vue
+++ b/src/Preview.vue
@@ -132,7 +132,10 @@ export default {
         if (renderedComponent.script) {
           // if the compiled code contains a script it might be "just" a script
           // if so, change scheme used by editor
-          this.$emit("detect-language", isCodeVueSfc(code) ? "vue" : "js");
+          // NOTE: vsg is a superset of JavaScript allowing
+          // the template to succeed litterally code, very useful for examples
+          // vsg stands for vue-styleguidist
+          this.$emit("detect-language", isCodeVueSfc(code) ? "vue" : "vsg");
 
           // compile and execute the script
           // it can be:
diff --git a/src/VueLive.vue b/src/VueLive.vue
index a37991d..f9009c2 100644
--- a/src/VueLive.vue
+++ b/src/VueLive.vue
@@ -15,6 +15,7 @@
         :delay="delay"
         :prism-lang="prismLang"
         :editor-props="editorProps"
+        :jsx="jsx"
         @change="updatePreview"
       />
     </template>
@@ -48,7 +49,7 @@ import VueLiveDefaultLayout from "./VueLiveDefaultLayout.vue";
 
 const LANG_TO_PRISM = {
   vue: "html",
-  js: "jsx",
+  vsg: "vsg",
 };
 
 const UPDATE_DELAY = 300;
diff --git a/src/utils/getScript.js b/src/utils/getScript.js
new file mode 100644
index 0000000..d4fa695
--- /dev/null
+++ b/src/utils/getScript.js
@@ -0,0 +1,25 @@
+import { parseComponent } from "vue-template-compiler";
+import { isCodeVueSfc } from "vue-inbrowser-compiler-utils";
+
+export default function(code, jsxInExamples) {
+  // In case we are loading a vue component as an example, extract script tag
+  if (isCodeVueSfc(code)) {
+    const parts = parseComponent(code);
+    return parts && parts.script ? parts.script.content : "";
+  }
+
+  // if in JSX mode or litteral return examples code as is
+  if (jsxInExamples || /new Vue\(/.test(code)) {
+    return code;
+  }
+
+  if (
+    /\n\W+?export\W+default\W/.test(code) ||
+    /\n\W+?module.exports(\W+)?=/.test(code)
+  ) {
+    return code;
+  }
+
+  //else it will be considered pseudo jsx of vue-styleguidist
+  return /^</.test(code.trim()) ? "" : code.split(/\n[\t ]*</)[0];
+}
diff --git a/tests/e2e/specs/LiveRefresh.js b/tests/e2e/specs/LiveRefresh.js
index a8edc89..8424a8d 100644
--- a/tests/e2e/specs/LiveRefresh.js
+++ b/tests/e2e/specs/LiveRefresh.js
@@ -18,7 +18,7 @@ describe("Live Refresh", () => {
 
     const codeToDelete = ' :value="today"/>';
     cy.get("@container")
-      .find(".prism-editor-wrapper pre")
+      .find(".prism-editor-wrapper textarea")
       .type(`${"{backspace}".repeat(codeToDelete.length)}/>`);
 
     cy.get("@preview")