fix demos

demos/package.json

@@ -11,6 +11,7 @@
     "@hocuspocus/provider": "^1.0.0-alpha.29",
     "d3": "^7.3.0",
     "fast-glob": "^3.2.11",
+    "highlight.js": "^11.6.0",
     "lowlight": "^2.7.0",
     "remixicon": "^2.5.0",
     "shiki": "^0.10.0",
@@ -39,4 +40,4 @@
     "vue": "^3.0.5",
     "vue-router": "^4.0.11"
   }
-}
+}

demos/src/Examples/CodeBlockLanguage/React/index.jsx

@@ -9,12 +9,21 @@ import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import { EditorContent, ReactNodeViewRenderer, useEditor } from '@tiptap/react'
+import css from 'highlight.js/lib/languages/css'
+import js from 'highlight.js/lib/languages/javascript'
+import ts from 'highlight.js/lib/languages/typescript'
+import html from 'highlight.js/lib/languages/xml'
 // load all highlight.js languages
 import { lowlight } from 'lowlight'
 import React from 'react'
 
 import CodeBlockComponent from './CodeBlockComponent'
 
+lowlight.registerLanguage('html', html)
+lowlight.registerLanguage('css', css)
+lowlight.registerLanguage('js', js)
+lowlight.registerLanguage('ts', ts)
+
 const MenuBar = ({ editor }) => {
   if (!editor) {
     return null

demos/src/Examples/CodeBlockLanguage/Vue/index.vue

@@ -13,11 +13,20 @@ import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import { Editor, EditorContent, VueNodeViewRenderer } from '@tiptap/vue-3'
+import css from 'highlight.js/lib/languages/css'
+import js from 'highlight.js/lib/languages/javascript'
+import ts from 'highlight.js/lib/languages/typescript'
+import html from 'highlight.js/lib/languages/xml'
 // load all highlight.js languages
 import { lowlight } from 'lowlight'
 
 import CodeBlockComponent from './CodeBlockComponent.vue'
 
+lowlight.registerLanguage('html', html)
+lowlight.registerLanguage('css', css)
+lowlight.registerLanguage('js', js)
+lowlight.registerLanguage('ts', ts)
+
 // load specific languages only
 // import { lowlight } from 'lowlight/lib/core'
 // import javascript from 'highlight.js/lib/languages/javascript'

demos/src/Nodes/CodeBlockLowlight/React/index.jsx

@@ -9,10 +9,19 @@ import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import { EditorContent, useEditor } from '@tiptap/react'
+import css from 'highlight.js/lib/languages/css'
+import js from 'highlight.js/lib/languages/javascript'
+import ts from 'highlight.js/lib/languages/typescript'
+import html from 'highlight.js/lib/languages/xml'
 // load all highlight.js languages
 import { lowlight } from 'lowlight'
 import React from 'react'
 
+lowlight.registerLanguage('html', html)
+lowlight.registerLanguage('css', css)
+lowlight.registerLanguage('js', js)
+lowlight.registerLanguage('ts', ts)
+
 export default () => {
   const editor = useEditor({
     extensions: [

demos/src/Nodes/CodeBlockLowlight/Vue/index.vue

@@ -17,13 +17,17 @@ import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import { Editor, EditorContent } from '@tiptap/vue-3'
+import css from 'highlight.js/lib/languages/css'
+import js from 'highlight.js/lib/languages/javascript'
+import ts from 'highlight.js/lib/languages/typescript'
+import html from 'highlight.js/lib/languages/xml'
 // load all highlight.js languages
 import { lowlight } from 'lowlight'
 
-// load specific languages only
+lowlight.registerLanguage('html', html)
-// import { lowlight } from 'lowlight/lib/core'
+lowlight.registerLanguage('css', css)
-// import javascript from 'highlight.js/lib/languages/javascript'
+lowlight.registerLanguage('js', js)
-// lowlight.registerLanguage('javascript', javascript)
+lowlight.registerLanguage('ts', ts)
 
 export default {
   components: {

package-lock.json

@@ -53,6 +53,7 @@
         "@hocuspocus/provider": "^1.0.0-alpha.29",
         "d3": "^7.3.0",
         "fast-glob": "^3.2.11",
+        "highlight.js": "^11.6.0",
         "lowlight": "^2.7.0",
         "remixicon": "^2.5.0",
         "shiki": "^0.10.0",
@@ -12007,6 +12008,14 @@
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
       "dev": true
     },
+    "node_modules/highlight.js": {
+      "version": "11.6.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.6.0.tgz",
+      "integrity": "sha512-ig1eqDzJaB0pqEvlPVIpSSyMaO92bH1N2rJpLMN/nX396wTpDA4Eq0uK+7I/2XG17pFaaKE0kjV/XPeGt7Evjw==",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/hosted-git-info": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
@@ -14157,14 +14166,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/lowlight/node_modules/highlight.js": {
-      "version": "11.6.0",
-      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.6.0.tgz",
-      "integrity": "sha512-ig1eqDzJaB0pqEvlPVIpSSyMaO92bH1N2rJpLMN/nX396wTpDA4Eq0uK+7I/2XG17pFaaKE0kjV/XPeGt7Evjw==",
-      "engines": {
-        "node": ">=12.0.0"
-      }
-    },
     "node_modules/lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -29968,6 +29969,11 @@
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
       "dev": true
     },
+    "highlight.js": {
+      "version": "11.6.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.6.0.tgz",
+      "integrity": "sha512-ig1eqDzJaB0pqEvlPVIpSSyMaO92bH1N2rJpLMN/nX396wTpDA4Eq0uK+7I/2XG17pFaaKE0kjV/XPeGt7Evjw=="
+    },
     "hosted-git-info": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
@@ -31537,11 +31543,6 @@
           "requires": {
             "format": "^0.2.0"
           }
-        },
-        "highlight.js": {
-          "version": "11.6.0",
-          "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.6.0.tgz",
-          "integrity": "sha512-ig1eqDzJaB0pqEvlPVIpSSyMaO92bH1N2rJpLMN/nX396wTpDA4Eq0uK+7I/2XG17pFaaKE0kjV/XPeGt7Evjw=="
         }
       }
     },
@@ -34858,6 +34859,7 @@
         "autoprefixer": "^10.4.2",
         "d3": "^7.3.0",
         "fast-glob": "^3.2.11",
+        "highlight.js": "^11.6.0",
         "iframe-resizer": "^4.3.2",
         "lowlight": "^2.7.0",
         "postcss": "^8.4.6",