153 lines
2.9 KiB
Vue
153 lines
2.9 KiB
Vue
<template>
|
||
<div v-if="editor">
|
||
<button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
|
||
code block
|
||
</button>
|
||
|
||
<editor-content :editor="editor" />
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { Editor, EditorContent, VueNodeViewRenderer } from '@tiptap/vue-2'
|
||
import Document from '@tiptap/extension-document'
|
||
import Paragraph from '@tiptap/extension-paragraph'
|
||
import Text from '@tiptap/extension-text'
|
||
import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
|
||
import CodeBlockComponent from './CodeBlockComponent'
|
||
|
||
// install all highlight.js languages
|
||
import 'lowlight'
|
||
|
||
// or install specific languages only
|
||
// import lowlight from 'lowlight/lib/core'
|
||
// import javascript from 'highlight.js/lib/languages/javascript'
|
||
// lowlight.registerLanguage('javascript', javascript)
|
||
|
||
export default {
|
||
components: {
|
||
EditorContent,
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
editor: null,
|
||
}
|
||
},
|
||
|
||
mounted() {
|
||
this.editor = new Editor({
|
||
extensions: [
|
||
Document,
|
||
Paragraph,
|
||
Text,
|
||
CodeBlockLowlight.extend({
|
||
addNodeView() {
|
||
return VueNodeViewRenderer(CodeBlockComponent)
|
||
},
|
||
}),
|
||
],
|
||
content: `
|
||
<p>
|
||
That’s a boring paragraph followed by a fenced code block:
|
||
</p>
|
||
<pre><code>for (var i=1; i <= 20; i++)
|
||
{
|
||
if (i % 15 == 0)
|
||
console.log("FizzBuzz");
|
||
else if (i % 3 == 0)
|
||
console.log("Fizz");
|
||
else if (i % 5 == 0)
|
||
console.log("Buzz");
|
||
else
|
||
console.log(i);
|
||
}</code></pre>
|
||
<p>
|
||
Press Command/Ctrl + Enter to leave the fenced code block and continue typing in boring paragraphs.
|
||
</p>
|
||
`,
|
||
})
|
||
},
|
||
|
||
beforeDestroy() {
|
||
this.editor.destroy()
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
/* Basic editor styles */
|
||
.ProseMirror {
|
||
> * + * {
|
||
margin-top: 0.75em;
|
||
}
|
||
|
||
pre {
|
||
background: #0D0D0D;
|
||
color: #FFF;
|
||
font-family: 'JetBrainsMono', monospace;
|
||
padding: 0.75rem 1rem;
|
||
border-radius: 0.5rem;
|
||
|
||
code {
|
||
color: inherit;
|
||
padding: 0;
|
||
background: none;
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.hljs-comment,
|
||
.hljs-quote {
|
||
color: #616161;
|
||
}
|
||
|
||
.hljs-variable,
|
||
.hljs-template-variable,
|
||
.hljs-attribute,
|
||
.hljs-tag,
|
||
.hljs-name,
|
||
.hljs-regexp,
|
||
.hljs-link,
|
||
.hljs-name,
|
||
.hljs-selector-id,
|
||
.hljs-selector-class {
|
||
color: #F98181;
|
||
}
|
||
|
||
.hljs-number,
|
||
.hljs-meta,
|
||
.hljs-built_in,
|
||
.hljs-builtin-name,
|
||
.hljs-literal,
|
||
.hljs-type,
|
||
.hljs-params {
|
||
color: #FBBC88;
|
||
}
|
||
|
||
.hljs-string,
|
||
.hljs-symbol,
|
||
.hljs-bullet {
|
||
color: #B9F18D;
|
||
}
|
||
|
||
.hljs-title,
|
||
.hljs-section {
|
||
color: #FAF594;
|
||
}
|
||
|
||
.hljs-keyword,
|
||
.hljs-selector-tag {
|
||
color: #70CFF8;
|
||
}
|
||
|
||
.hljs-emphasis {
|
||
font-style: italic;
|
||
}
|
||
|
||
.hljs-strong {
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
}
|
||
</style>
|