Merge branch 'vicpon-master'

Author: Jan Bílek

src/App.vue

@@ -1,5 +1,15 @@
 <template>
   <div>
+    <div>
+      <h3>Dynamically update code:</h3>
+      <textarea v-model="dynamicCode"></textarea>
+      <code-highlight>
+        {{dynamicCode}}
+      </code-highlight>
+    </div>
+    
+    <hr />
+    
     <code-highlight>
       let isPalindrome = (word) => {
           let [length, result] = [word.length, true];
@@ -25,7 +35,9 @@ export default {
     CodeHighlight,
   },
   data() {
-    return {};
+    return {
+      dynamicCode: '<div>Type here to see me change below</div>'
+    };
   },
 };
 </script>
@@ -38,6 +50,10 @@ body {
   justify-content: center;
   align-items: center;
 }
+textarea {
+  width:400px;
+  height:200px;
+}
 @import '../themes/duotone-sea.css';
 @import '../themes/window.css';
 </style>

src/CodeHighlight.vue

@@ -1,10 +1,6 @@
 <template>
 <div ref="codeBlock">
-  <pre :class="languageClass">
-    <code>
-      <slot></slot>
-    </code>
-  </pre>
+  <pre :class="languageClass"><code><slot /></code></pre>
 </div>
 </template>
 
@@ -27,5 +23,11 @@ export default {
   mounted() {
     Prism.highlightAllUnder(this.$refs.codeBlock);
   },
+
+  beforeUpdate () {
+    const newText = this.$slots.default[0].text.replace(/^[\r\n\s]*|[\r\n\s]*$/g, "");
+    this.$el.querySelector('code').textContent = newText;
+    Prism.highlightAllUnder(this.$refs.codeBlock);
+  }
 };
 </script>