使用 CodeBlock代码块扩展,你可以在文档中显示源代码而不被浏览器解析,代码包裹在HTML标记的 pre 和 code 标签中。
npm install @tiptap/extension-code-block
languageClassPrefix 代码样式class的前缀。
CodeBlock.configure({
languageClassPrefix: 'language-',
})
exitOnTripleEnter 是否应该在三重输入时退出节点,默认true。
CodeBlock.configure({
exitOnTripleEnter: false,
})
exitOnArrowDown 当下方没有节点时,按向下箭头退出,默认为true。
CodeBlock.configure({
exitOnArrowDown: false,
})
HTMLAttributes 自定义标签对应的HTML属性。
CodeBlock.configure({
HTMLAttributes: {
class: 'my-custom-class',
},
})
setCodeBlock 将选中内容转换为代码块。
editor.commands.setCodeBlock()
toggleCodeBlock 将选中内容切换为代码块或取消代码块。
editor.commands.toggleCodeBlock()
Windows/Linux Control Alt C
macOS Cmd Alt C
Vue 例子
React 例子
<template>
<div v-if="editor">
<button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
toggleCodeBlock
</button>
<button @click="editor.chain().focus().setCodeBlock().run()" :disabled="editor.isActive('codeBlock')">
setCodeBlock
</button>
<editor-content :editor="editor" />
</div>
</template>
<script>
import CodeBlock from '@tiptap/extension-code-block'
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'
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
}
},
mounted() {
this.editor = new Editor({
extensions: [
Document,
Paragraph,
Text,
CodeBlock,
],
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>
`,
})
},
beforeUnmount() {
this.editor.destroy()
},
}
</script>
<style>
/* 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;
}
}
}
</style>
import './styles.scss'
import CodeBlock from '@tiptap/extension-code-block'
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 React from 'react'
export default () => {
const editor = useEditor({
extensions: [Document, Paragraph, Text, CodeBlock],
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>
`,
})
if (!editor) {
return null
}
return (
<>
<button
onClick={() => editor.chain().focus().toggleCodeBlock().run()}
className={editor.isActive('codeBlock') ? 'is-active' : ''}
>
toggleCodeBlock
</button>
<button
onClick={() => editor.chain().focus().setCodeBlock().run()}
disabled={editor.isActive('codeBlock')}
>
setCodeBlock
</button>
<EditorContent editor={editor} />
</>
)
}
/* Basic editor styles */
/*
.ProseMirror {
> * + * {
margin-top: 0.75em;
}
pre {
background: #0d0d0d;
border-radius: 0.5rem;
color: #fff;
font-family: "JetBrainsMono", monospace;
padding: 0.75rem 1rem;
code {
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
}
}
*/
本教程Demo的源码点击这里下载,Tiptap Demo,下载完成后运行npm i初始化依赖包。