ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix code highlighting example

Browse Source
This commit is contained in:
Philipp Kühn
2018-10-23 23:12:56 +02:00
parent 0c9d481cd2
commit e66debc823
1 changed files with 38 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
examples/Components/Routes/CodeHighlighting/index.vue
View File

@@ -1,33 +1,11 @@
<template> <template>
<div> <div class="editor">
<editor class="editor" :extensions="extensions"> <editor-content class="editor__content" :editor="editor" />
<div class="editor__content" slot="content" slot-scope="props">
<h2>
Code Highlighting
</h2>
<p>
These are code blocks with <strong>automatic syntax highlighting</strong> based on highlight.js.
</p>
<pre><code v-html="JavaScriptExample"></code></pre>
<pre><code v-html="CSSExample"></code></pre>
<p>
Note: tiptap doesn't import syntax highlighting language definitions from highlight.js. You
<strong>must</strong> import them and initialize the extension with all languages you want to support:
</p>
<pre><code v-html="ExplicitImportExample"></code></pre>
</div>
</editor>
</div> </div>
</template> </template>
<script> <script>
import javascript from 'highlight.js/lib/languages/javascript' import { Editor, EditorContent } from 'tiptap'
import css from 'highlight.js/lib/languages/css'
import { Editor } from 'tiptap'
import { import {
CodeBlockHighlightNode, CodeBlockHighlightNode,
HardBreakNode, HardBreakNode,
@@ -37,6 +15,9 @@ import {
ItalicMark, ItalicMark,
} from 'tiptap-extensions' } from 'tiptap-extensions'
import javascript from 'highlight.js/lib/languages/javascript'
import css from 'highlight.js/lib/languages/css'
import { import {
JavaScriptExample, JavaScriptExample,
CSSExample, CSSExample,
@@ -45,26 +26,41 @@ import {
export default { export default {
components: { components: {
Editor, EditorContent,
}, },
data() { data() {
return { return {
extensions: [ editor: new Editor({
new CodeBlockHighlightNode({ extensions: [
languages: { new CodeBlockHighlightNode({
javascript, languages: {
css, javascript,
}, css,
}), },
new HardBreakNode(), }),
new HeadingNode({ maxLevel: 3 }), new HardBreakNode(),
new BoldMark(), new HeadingNode({ maxLevel: 3 }),
new CodeMark(), new BoldMark(),
new ItalicMark(), new CodeMark(),
], new ItalicMark(),
JavaScriptExample, ],
CSSExample, content: `
ExplicitImportExample, <h2>
Code Highlighting
</h2>
<p>
These are code blocks with <strong>automatic syntax highlighting</strong> based on highlight.js.
</p>
<pre><code>${JavaScriptExample}</code></pre>
<pre><code>${CSSExample}</code></pre>
<p>
Note: tiptap doesn't import syntax highlighting language definitions from highlight.js. You
<strong>must</strong> import them and initialize the extension with all languages you want to support:
</p>
<pre><code>${ExplicitImportExample}</code></pre>
`,
}),
} }
}, },
} }