add highlight option for demos

docs/src/components/Demo/index.vue

@@ -17,7 +17,7 @@
         </button>
       </div>
       <div class="demo__code" v-if="activeFile">
-        <pre :class="`language-${activeFile.highlight}`"><code :class="`language-${activeFile.highlight}`" v-html="$options.filters.highlight(activeFile.content, activeFile.highlight)"></code></pre>
+        <prism :code="activeFile.content" :language="activeFile.highlight" :highlight="highlight" />
       </div>
     </div>
   </div>
@@ -26,10 +26,12 @@
 <script>
 import collect from 'collect.js'
 import ReactRenderer from '~/components/ReactRenderer'
+import Prism from '~/components/Prism'
 
 export default {
   components: {
     ReactRenderer,
+    Prism,
   },
 
   props: {
@@ -42,6 +44,11 @@ export default {
       type: String,
       default: 'vue',
     },
+
+    highlight: {
+      type: String,
+      default: null,
+    },
   },
 
   data() {

docs/src/components/Prism/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <pre :class="`language-${language}`" :data-line="highlight"><code :class="`language-${language}`">{{ code }}</code></pre>
+</template>
+
+<script>
+import Prism from 'prismjs'
+import 'prismjs/plugins/line-highlight/prism-line-highlight.js'
+import 'prismjs/plugins/line-highlight/prism-line-highlight.css'
+
+export default {
+  props: {
+    language: {
+      default: 'js',
+      type: String,
+    },
+
+    code: {
+      default: null,
+      type: String,
+    },
+
+    highlight: {
+      type: String,
+      default: null,
+    },
+  },
+
+  watch: {
+    highlight() {
+      this.$nextTick(this.highlightCode)
+    },
+  },
+
+  methods: {
+    highlightCode() {
+
+      Prism.highlightAllUnder(this.$el)
+    }
+  },
+
+  mounted() {
+    this.highlightCode()
+  },
+
+  beforeDestroy() {
+    console.log('JOOOO')
+  },
+}
+</script>
+
+<style>
+
+</style>

docs/src/demos/ExtensionConfiguration/index.vue

@@ -7,12 +7,10 @@
 <script>
 import { Editor } from '@tiptap/core'
 import { EditorContent, Renderer } from '@tiptap/vue'
-// <- Highlight --> //
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import Bold from '@tiptap/extension-bold'
-// <- /Highlight --> //
 
 export default {
   components: {
@@ -29,12 +27,10 @@ export default {
     this.editor = new Editor({
       content: '<p>I’m running tiptap with Vue.js. This demo is interactive, try to edit the text.</p>',
       extensions: [
-        // <- Highlight --> //
         new Document(),
         new Paragraph(),
         new Text(),
         new Bold(),
-        // <- /Highlight --> //
       ],
       renderer: Renderer,
     })

docs/src/demos/SimpleMenuBar/index.vue

@@ -2,7 +2,6 @@
   <div class="editor">
     <div class="menubar" v-if="editor">
 
-      <!-- Highlight -->
       <button
         class="menubar__button"
         :class="{ 'is-active': editor.isActive('bold') }"
@@ -10,7 +9,6 @@
       >
         Bold
       </button>
-      <!-- /Highlight -->
 
     </div>
 

docs/src/docPages/configuration.md

@@ -6,7 +6,7 @@ In its basic version tiptap comes very raw. There is no menu, no buttons, no sty
 
 Let’s start to add your first button to the editor.
 
-<demo name="SimpleMenuBar" />
+<demo name="SimpleMenuBar" highlight="5-11" />
 
 Once initiated the editor has a powerful API. So called commands allow you to modify the text. In this example `this.editor.commands.bold` marks the selected text bold. There a ton of other commands (see the [list of available commands](/commands/)) and you can even chain them to do multiple things at once.
 
@@ -18,7 +18,7 @@ You are free to choose which parts of tiptap you want to use. Tiptap has support
 
 Note that `Document`, `Paragraph` and `Text` are required. Otherwise you won’t be able to add any plain text.
 
-<demo name="ExtensionConfiguration" />
+<demo name="ExtensionConfiguration" highlight="10-13,30-33" />
 
 That’s also the place where you can register custom extensions, which you or someone else built for tiptap.
 

docs/src/layouts/App/base.scss

@@ -82,7 +82,7 @@ code {
   padding: 0.1rem 0.3rem;
   border-radius: 0.25rem;
   color: rgba($colorBlack, 0.7);
-  font-size: 0.9em;
+  font-size: 0.9rem;
 }
 
 .is-active {

docs/src/layouts/App/prism.scss

@@ -20,7 +20,7 @@ pre[class*="language-"] {
   color: inherit;
   text-shadow: none;
   font-family: 'JetBrainsMono', monospace;
-  font-size: 0.95em;
+  font-size: 0.9rem;
   line-height: 1.8;
   tab-size: 2;
   padding: 0;
@@ -43,7 +43,7 @@ pre[class*="language-"] {
   position: relative;
   color: $codeText;
   background: $codeBackground;
-  padding: 1.2rem 1.5rem;
+  padding: 1.2rem 1.5rem !important;
   border-radius: 0.5rem;
 }
 
@@ -201,4 +201,14 @@ pre[class*="language-"].language-scss > code {
 
 .token.variable {
   color: $codeRed;
+}
+
+.line-highlight {
+  background: rgba($colorWhite, 0.1) !important;
+  padding: 0 0 0.3rem 0;
+
+  &::before,
+  &::after {
+    display: none;
+  }
 }

docs/src/main.js

@@ -11,7 +11,4 @@ export default function (Vue, { router, head, isClient }) {
   Vue.component('Demo', Demo)
   Vue.component('Tab', Tab)
   Vue.component('ReactRenderer', ReactRenderer)
-  Vue.filter('highlight', (code, lang = 'javascript') => {
-    return Prism.highlight(code, Prism.languages[lang], lang)
-  })
 }