diff --git a/demos/package.json b/demos/package.json index 17421ef3..723dd918 100644 --- a/demos/package.json +++ b/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" } -} \ No newline at end of file +} diff --git a/demos/src/Examples/CodeBlockLanguage/React/index.jsx b/demos/src/Examples/CodeBlockLanguage/React/index.jsx index 221b355a..54251263 100644 --- a/demos/src/Examples/CodeBlockLanguage/React/index.jsx +++ b/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 diff --git a/demos/src/Examples/CodeBlockLanguage/Vue/index.vue b/demos/src/Examples/CodeBlockLanguage/Vue/index.vue index 63afce81..36e07438 100644 --- a/demos/src/Examples/CodeBlockLanguage/Vue/index.vue +++ b/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' diff --git a/demos/src/Nodes/CodeBlockLowlight/React/index.jsx b/demos/src/Nodes/CodeBlockLowlight/React/index.jsx index ea711527..e6bef15c 100644 --- a/demos/src/Nodes/CodeBlockLowlight/React/index.jsx +++ b/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: [ diff --git a/demos/src/Nodes/CodeBlockLowlight/Vue/index.vue b/demos/src/Nodes/CodeBlockLowlight/Vue/index.vue index 33160fe4..b44790f6 100644 --- a/demos/src/Nodes/CodeBlockLowlight/Vue/index.vue +++ b/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 -// import { lowlight } from 'lowlight/lib/core' -// import javascript from 'highlight.js/lib/languages/javascript' -// lowlight.registerLanguage('javascript', javascript) +lowlight.registerLanguage('html', html) +lowlight.registerLanguage('css', css) +lowlight.registerLanguage('js', js) +lowlight.registerLanguage('ts', ts) export default { components: { diff --git a/package-lock.json b/package-lock.json index 185cd22e..b4097ce6 100644 --- a/package-lock.json +++ b/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",