diff --git a/examples/Components/Routes/CodeHighlighting/examples.js b/examples/Components/Routes/CodeHighlighting/examples.js index b36ae785f..620696540 100644 --- a/examples/Components/Routes/CodeHighlighting/examples.js +++ b/examples/Components/Routes/CodeHighlighting/examples.js @@ -26,3 +26,25 @@ body, .usertext { content: attr(href) } }` + + +export const explicitImportExample = `import javascript from 'highlight.js/lib/languages/javascript' +import { Editor } from 'tiptap' + +export default { + components: { + Editor + }, + data() { + return { + extensions: [ + new CodeBlockHighlightNode({ + languages: { + javascript, + css + } + }) + ] + } + } +}`; diff --git a/examples/Components/Routes/CodeHighlighting/index.vue b/examples/Components/Routes/CodeHighlighting/index.vue index e65a52887..48ff1d770 100644 --- a/examples/Components/Routes/CodeHighlighting/index.vue +++ b/examples/Components/Routes/CodeHighlighting/index.vue @@ -9,8 +9,14 @@
These are code blocks with automatic syntax highlighting based on highlight.js.
-
-
+
+
+
+ + Note: tiptap doesn't import syntax highlighting language definitions from highlight.js. You + must import them and initialize the extension with all languages you want to support: +
+
@@ -18,6 +24,9 @@