如何在TipTap编辑器中使用HTML pre预格式化标签？

标签保留空白（无需code-block扩展） #

当然可以直接在TipTap中实现支持<pre>标签的功能，完全不需要依赖code-block扩展，这样既能保留空白字符，又允许在预格式化内容中使用其他行内样式。下面是具体实现方案：

1. 自定义

节点扩展 #

TipTap基于ProseMirror，你可以快速创建一个自定义扩展来注册<pre>节点，配置它允许包含任意行内元素和标记：

import { Node } from '@tiptap/core'

const Pre = Node.create({
  name: 'pre',
  group: 'block',
  content: 'inline*',
  marks: '_', // 允许所有行内标记（加粗、斜体、链接等）
  parseHTML() {
    return [{ tag: 'pre' }]
  },
  renderHTML({ HTMLAttributes }) {
    return ['pre', HTMLAttributes, 0]
  },
  // 可选：添加快捷键快速切换pre格式
  addKeyboardShortcuts() {
    return {
      'Mod-Shift-p': () => this.editor.commands.toggleNode('pre', 'paragraph'),
    }
  },
})

2. 注册扩展到编辑器 #

初始化TipTap编辑器时，将自定义的Pre扩展加入扩展列表：

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

const editor = new Editor({
  element: document.querySelector('.tiptap'),
  extensions: [
    StarterKit,
    Pre, // 加入自定义pre扩展
  ],
  // 示例内容：验证pre标签的空白保留效果
  content: '<p>普通段落内容</p><pre>这里的 多个空格 会被 完整保留\n换行也能正常显示\n还可以添加**加粗**或者*斜体*样式</pre>',
})

3. 自定义样式（可选） #

浏览器默认的<pre>标签带有灰色背景和等宽字体，如果你不需要这些样式，可以通过CSS覆盖：

.tiptap pre {
  background: transparent;
  font-family: inherit;
  padding: 0;
  white-space: pre-wrap; /* 可选：让超长文本自动换行，避免横向滚动 */
}

这种方案的核心优势是：既保留了<pre>标签的空白字符保留特性，又完全放开了内容样式限制，用户可以在预格式化块内使用任意行内样式，完全满足你的需求。

内容的提问来源于stack exchange，提问作者Grav