diff --git a/docs/assets/css/styles.css b/docs/assets/css/styles.css index d9011478f53..0ee72c5929c 100644 --- 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 index 3cb61f93c0a..b6107041048 100644 --- 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 - - ``` ## 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: - - ``` diff --git a/docs/nuxt.config.js b/docs/nuxt.config.js index 98c6f2e9ebd..71b5f7fc9dc 100644 --- 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 `
${highlighted}
` +} + +// 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 } } ] }) diff --git a/docs/plugins/play.js b/docs/plugins/play.js index f543aba670f..e2cde58c825 100644 --- a/docs/plugins/play.js +++ b/docs/plugins/play.js @@ -1,108 +1,137 @@ import Vue from 'vue' import debounce from 'lodash/debounce' +import hljs from 'highlightjs' -const VUE_REGEX = // +const NAME_REGEX = // +const NAME_DEFINITION_REGEX = // const TEMPLATE_REGEX = /