bootstrap-vue · tmorehouse · Nov 15, 2018 · Nov 14, 2018 · Nov 14, 2018 · Nov 14, 2018
diff --git a/docs/assets/css/styles.css b/docs/assets/css/styles.css
@@ -77,6 +77,16 @@ pre.editable.live:after {
   content: 'Live';
 }
 
+pre.editable.error {
+  border: 1px solid #dc3545;
+  box-shadow: 0 1px 1px rgba(220, 53, 69, 0.5);
+}
+
+pre.editable.error:after {
+  content: 'JavaScript compile error!';
+  color: #dc3545;
+}
+
 .bd-footer {
   padding: 4rem 0;
   margin-top: 4rem;

diff --git a/docs/markdown/reference/validation/README.md b/docs/markdown/reference/validation/README.md
@@ -48,43 +48,40 @@ This is a verbose example designed to show how Bootstrap-Vue and Vuelidate inter
 </template>
 
 <script>
-  import { validationMixin } from "vuelidate"
-  import { required, minLength } from "vuelidate/lib/validators"
-
-  export default {
-    name: "myForm",
-    data() {
-      return {
-        foods: [
-          "apple",
-          "orange"
-        ],
-        form: {}
-      }
-    },
-    mixins: [
-      validationMixin
-    ],
-    validations: {
-      form: {
-        food: {
-          required
-        },
-        name: {
-          required,
-          minLength: minLength(3)
-        }
-      }
-    },
-    methods: {
-      onSubmit() {
-        // form submit logic
+import { validationMixin } from 'vuelidate'
+import validators from 'vuelidate/lib/validators'
+
+export default {
+  data() {
+    return {
+      foods: [
+        'apple',
+        'orange'
+      ],
+      form: {}
+    }
+  },
+  mixins: [
+    validationMixin
+  ],
+  validations: {
+    form: {
+      food: {
+        required: validators.required
+      },
+      name: {
+        required: validators.required,
+        minLength: validators.minLength(3)
       }
     }
+  },
+  methods: {
+    onSubmit() {
+      // form submit logic
+    }
   }
+}
 </script>
-
-<!-- form-validation-1.vue -->
 ```
 
 ## vee-validate
@@ -95,7 +92,7 @@ This is a verbose example designed to show how Bootstrap-Vue and Vuelidate inter
 
 You need to configure `vee-validate`'s fields property or it will conflict with `b-table`'s `:fields` property when it injects itself.
 
-```
+```js
 import Vue from 'vue'
 import VeeValidate from 'vee-validate'
 
@@ -145,32 +142,28 @@ Same example as above just modified for vee-validate:
 </template>
 
 <script>
-
-  export default {
-    name: "myForm",
-    data() {
-      return {
-        foods: [
-          "apple",
-          "orange"
-        ],
-        form: {}
+export default {
+  data() {
+    return {
+      foods: [
+        'apple',
+        'orange'
+      ],
+      form: {}
+    }
+  },
+  methods: {
+    onSubmit() {
+      // form submit logic
+    },
+    validateState(ref) {
+      if (this.veeFields[ref] && (this.veeFields[ref].dirty || this.veeFields[ref].validated)) {
+        return !this.errors.has(ref)
       }
+      return null
     },
-    methods: {
-      onSubmit() {
-        // form submit logic
-      },
-      validateState(ref) {
-        if (this.veeFields[ref] && (this.veeFields[ref].dirty || this.veeFields[ref].validated)) {
-          return !this.errors.has(ref)
-        }
-        return null
-      },
-    }
   }
+}
 </script>
-
-<!-- form-validation-1.vue -->
 ```
 
diff --git a/docs/nuxt.config.js b/docs/nuxt.config.js
@@ -1,8 +1,17 @@
 const fs = require('fs')
+const hljs = require('highlightjs')
 const marked = require('marked')
 
-// Markdown renderer with BS4 tables support
 const renderer = new marked.Renderer()
+
+// Custom "highlightjs" implementation for markdown renderer
+renderer.code = (code, language) => {
+  const validLang = !!(language && hljs.getLanguage(language))
+  const highlighted = validLang ? hljs.highlight(language, code).value : code
+  return `<pre class="hljs ${language}">${highlighted}</pre>`
+}
+
+// BS4 table support for markdown renderer
 const originalTable = renderer.table
 renderer.table = function renderTable (header, body) {
   let r = originalTable.apply(this, arguments)
@@ -25,7 +34,6 @@ module.exports = {
         test: /\.md$/,
         use: [
           { loader: 'html-loader' },
-          { loader: 'highlight-loader' },
           { loader: 'markdown-loader', options: { renderer } }
         ]
       })