Tiptap编辑器h1/h2字号无变化、代码块无高亮问题排查

一、标题（h1/h2）无字号变化的原因及修复 #

核心问题 #

1. 重复扩展注册冲突：你同时通过StarterKit和单独的Heading.configure()注册了Heading扩展，导致配置被覆盖；且StarterKit中的heading配置设置了空class，没有为标题元素绑定样式类。
2. Tailwind样式重置：Tailwind的Preflight会重置浏览器默认的标题样式，若未手动为编辑器内的h1/h2添加样式类，就会和普通文本字号一致。

修复步骤 #

1. 移除重复的Heading扩展，仅在StarterKit中配置Heading，并为每个标题级别指定Tailwind样式类：

const editor = useEditor({
  extensions: [
    // 移除单独的Heading.configure({ levels: [1, 2] })
    CodeBlockLowlight.configure({
      lowlight,
    }),
    StarterKit.configure({
      bulletList: {
        HTMLAttributes: {
          class: "bullet_class",
        },
      },
      orderedList: {
        HTMLAttributes: {
          class: "order_class",
        },
      },
      heading: {
        levels: [1, 2], // 在这里指定标题级别
        HTMLAttributes: {
          // 为每个级别绑定样式类
          class: ({ level }) => {
            switch(level) {
              case 1: return "text-3xl font-bold mb-2";
              case 2: return "text-2xl font-semibold mb-1";
              default: return "";
            }
          },
        },
      },
    }),
    // 其他扩展保持不变...
  ],
  // 其余配置不变
})

2. 可选：直接为编辑器内标题添加全局样式
   如果不想通过类名绑定，也可以在项目CSS中直接针对编辑器区域的标题设置样式：

.tiptap h1 {
  font-size: 1.875rem;
  font-weight: 700;
  margin: 0.5rem 0;
}
.tiptap h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0.5rem 0;
}

二、代码块无高亮的原因及修复 #

核心问题 #

1. 未导入语言高亮模块：CodeBlockLowlight需要指定要支持的编程语言，否则无法解析代码语法。
2. 缺少高亮样式：未引入lowlight的样式文件，导致没有颜色区分。

修复步骤 #

1. 安装并导入语言包
   首先安装依赖（若未安装）：

npm install lowlight

然后在组件中导入常用语言并注册：

import lowlight from 'lowlight/lib/core';
import javascript from 'lowlight/lib/common/javascript';
import css from 'lowlight/lib/common/css';
import html from 'lowlight/lib/common/html';

// 注册需要支持的编程语言
lowlight.registerLanguage('javascript', javascript);
lowlight.registerLanguage('css', css);
lowlight.registerLanguage('html', html);

2. 引入高亮样式
   在项目的CSS文件中添加lowlight的默认语法高亮样式：

/* 代码块容器样式 */
pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em;
  background-color: #f6f8fa;
  border-radius: 4px;
}
/* 行内代码样式 */
code.hljs {
  padding: 2px 4px;
  border-radius: 2px;
  background-color: #f6f8fa;
}

/* 具体语法高亮样式示例 */
.hljs-comment { color: #6e7781; }
.hljs-keyword, .hljs-selector-tag { color: #cf222e; }
.hljs-string, .hljs-regexp { color: #0a3069; }
.hljs-function { color: #8250df; }

3. 完善代码块配置

CodeBlockLowlight.configure({
  lowlight,
  // 可选：设置默认显示的编程语言
  defaultLanguage: 'javascript',
}),

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