如何使用TipTap实现代码块语法高亮？

你当前用StarterKit创建的代码块没有语法高亮，是因为StarterKit自带的CodeBlock只是基础的代码块容器，不具备语法高亮能力，需要借助专门的扩展来实现，具体步骤如下：

1. 安装依赖 #

首先需要安装TipTap的代码块高亮扩展和语法高亮核心库：

npm install @tiptap/extension-code-block-lowlight lowlight
# 或者用yarn/pnpm
# yarn add @tiptap/extension-code-block-lowlight lowlight
# pnpm add @tiptap/extension-code-block-lowlight lowlight

2. 修改编辑器配置 #

因为StarterKit已经包含了默认的CodeBlock，所以需要先禁用它，再添加CodeBlockLowlight扩展，修改后的代码如下：

import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import Highlight from '@tiptap/extension-highlight';
import Typography from '@tiptap/extension-typography';
import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight';
import { lowlight } from 'lowlight';

new Editor({
  element: element,
  extensions: [
    // 禁用StarterKit自带的CodeBlock
    StarterKit.configure({
      codeBlock: false,
    }),
    Highlight,
    Typography,
    // 配置代码高亮扩展
    CodeBlockLowlight.configure({
      lowlight,
      defaultLanguage: 'javascript', // 设置默认的代码语言
    }),
  ],
  content: html,
  onTransaction: () => {
    // force re-render so `editor.isActive` works as expected
    editor = editor;
  },
  editorProps: {
    attributes: {
      class: 'focus:outline-none',
    },
  }
});

3. 添加高亮样式 #

lowlight会给代码中的不同语法元素添加对应的类名（比如token keyword、token string等），你需要添加CSS样式来实现可视化的高亮效果，以下是一个基础的示例样式：

/* 代码块容器样式 */
.tiptap pre {
  background-color: #f6f8fa;
  padding: 1.25rem;
  border-radius: 6px;
  overflow-x: auto;
  font-family: 'Monaco', 'Menlo', monospace;
}

/* 语法元素高亮样式 */
.tiptap pre .token.keyword {
  color: #d73a49;
}
.tiptap pre .token.string {
  color: #032f62;
}
.tiptap pre .token.comment {
  color: #6a737d;
  font-style: italic;
}
.tiptap pre .token.function {
  color: #6f42c1;
}
.tiptap pre .token.number {
  color: #005cc5;
}

配置完成后，你用三个反引号创建代码块时，可以指定语言（比如```javascript），编辑器会自动对代码进行语法高亮；如果不指定语言，会使用你设置的默认语言进行高亮。

内容的提问来源于stack exchange，提问作者David Dal Busco