在Gatsby的DatoCMS结构化文本中实现代码语法高亮

一、Structured Text vs Rich Text 选择 #

• 若你更依赖Markdown语法的代码块高亮，Rich Text更适配需求——DatoCMS的Rich Text支持直接插入带语言标识的代码块，渲染后会自动输出带language-xxx类名的标签（如<pre><code class="language-javascript">），刚好匹配Prism的高亮规则。
• Structured Text对Markdown代码块的原生解析不会自动添加语言类名，这是当前渲染后无语法相关样式类的核心原因，除非自定义解析逻辑。

二、现有Structured Text的修复方案 #

如果不想切换到Rich Text，可通过以下步骤修复语法高亮：

1. 自定义代码块渲染逻辑：在Gatsby处理DatoCMS返回的Structured Text数据时，针对code_block类型节点手动注入语言类名。比如使用gatsby-source-datocms的renderStructuredText时自定义渲染规则：

import { renderStructuredText } from 'gatsby-source-datocms';

const renderOptions = {
  renderBlock: ({ record, children }) => {
    if (record.__typename === 'DatoCmsCodeBlock') {
      // 假设代码块字段包含language属性
      return <pre><code className={`language-${record.language}`}>{children}</code></pre>;
    }
    return null;
  },
};

// 组件中调用渲染
renderStructuredText(post.content, renderOptions);

2. 重新初始化Prism.js：确保Prism在客户端正确执行高亮逻辑，在gatsby-browser.js中添加：

import Prism from 'prismjs';
import 'prismjs/themes/prism-tomorrow.css'; // 替换为你使用的SCSS样式文件

export const onRouteUpdate = () => {
  Prism.highlightAll();
};

同时调整SCSS选择器，确保匹配注入的语言类：

pre code.language-javascript {
  color: #f8f8f2;
  background: #282a36;
  // 其他语法高亮样式
}

三、可用工具/插件推荐 #

• gatsby-transformer-remark + gatsby-remark-prismjs：若仍习惯纯Markdown编写，可在DatoCMS中将文章内容存为纯Markdown字段，用这两个插件复刻你之前的高亮流程。
• datocms-structured-text-to-html：自定义Structured Text转HTML的工具，可更灵活地控制代码块的输出结构与类名。

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