React Syntax Highlighter仅高亮JS代码，Ruby代码高亮失效求助

你的代码存在三个关键问题，导致Ruby代码无法被正确高亮：

1. 组件与语言库不兼容 #

你使用的Light组件是基于Prism.js实现的，但导入的却是Highlight.js（hljs）的Ruby语言包——两者属于不同的语法高亮引擎，语言包无法通用，导致注册无效。

2. 未指定目标语言 #

即使语言注册成功，SyntaxHighlighter默认会自动猜测代码语言，大概率会把Ruby识别成JavaScript，必须显式指定language="ruby"。

3. 冗余的导入路径 #

导入时无需手动写node_modules前缀，直接从react-syntax-highlighter包内导入即可，避免路径解析错误。

修复方案一：使用Highlight.js（Dark组件） #

这是匹配你原本导入的hljs语言包的正确写法：

import React from "react";
import { Dark as SyntaxHighlighter } from "react-syntax-highlighter";
import { a11yDark } from "react-syntax-highlighter/dist/cjs/styles/hljs";
import { ruby } from "react-syntax-highlighter/dist/cjs/languages/hljs";

SyntaxHighlighter.registerLanguage("ruby", ruby);

export default function RubyCode() {
  return (
    <SyntaxHighlighter 
      style={a11yDark} 
      showLineNumbers
      language="ruby"
    >
      {`class Food
  attr_accessor :protein

  def initialize(protein)
    @protein = protein
  end
end`}
    </SyntaxHighlighter>
  );
}

修复方案二：使用Prism.js（Light组件） #

如果你想继续用Light组件，需要换成Prism.js对应的语言和样式包：

import React from "react";
import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
import { atomDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
import { ruby } from "react-syntax-highlighter/dist/cjs/languages/prism";

SyntaxHighlighter.registerLanguage("ruby", ruby);

export default function RubyCode() {
  return (
    <SyntaxHighlighter 
      style={atomDark} 
      showLineNumbers
      language="ruby"
    >
      {`class Food
  attr_accessor :protein

  def initialize(protein)
    @protein = protein
  end
end`}
    </SyntaxHighlighter>
  );
}

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