Remix配置rehype-highlight时如何注册GraphQL高亮语言

rehype-highlight 底层基于 lowlight 做语法解析，默认仅内置了少量常用语言的高亮支持，要新增 GraphQL 这类语言，手动导入对应语言包注册即可，操作步骤如下：

• 首先修改remix.config.js中的MDX配置项，除了rehype-highlight本身，同步导入lowlight实例、你需要的目标语言包
• 调用lowlight的注册方法挂载对应语言，按需配置语言别名
• 把配置好的参数传给rehype-highlight插件，关闭无关的自动检测避免报错

完整可用的配置代码如下：

mdx: async (filename) => {
  const [rehypeHighlight, graphqlLang, lowlight] = await Promise.all([
    import("rehype-highlight").then((module) => module.default),
    // 导入需要新增的语言包，此处以GraphQL为例
    import("highlight.js/lib/languages/graphql").then((mod) => mod.default),
    import("lowlight").then((mod) => mod.default),
  ]);

  // 注册语言：第一个参数是代码块声明的语言标识，第二个是导入的语言包
  lowlight.registerLanguage("graphql", graphqlLang);
  // 可选：配置语言别名，比如让```gql标记的代码块也按GraphQL规则高亮
  lowlight.registerAlias("graphql", ["gql", "graphqls"]);

  return {
    rehypePlugins: [
      [
        rehypeHighlight,
        {
          detect: false, // 关闭未注册语言自动检测，避免运行报错
        },
      ],
    ],
  };
},

补充说明：

• 如果导入lowlight或语言包时报模块不存在，手动执行npm i lowlight highlight.js安装对应依赖即可
• 需要新增其他语言时，按照同样规则导入highlight.js/lib/languages/路径下对应的语言包，再调用registerLanguage注册即可
• 配置完成后重启Remix开发服务，在MDX文件里用````graphql`标记代码块就能正常触发高亮

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