React Syntax Highlighter выделяет только код JS

Question

Я хочу выделить кое-какой код Ruby, но, хоть убей, он не работает. На самом деле, кажется, что это только подчеркивает JavaScript.

      import React from "react";
import atom from "node_modules/react-syntax-highlighter/dist/cjs/styles/hljs/a11y-dark";
import ruby from "node_modules/react-syntax-highlighter/dist/cjs/languages/hljs/ruby";
import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
SyntaxHighlighter.registerLanguage("ruby", ruby);

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

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

Я делаю что-то неправильно? Застрял на этом уже около 3 часов... безрезультатно :(

Answer 1

А как насчет использования Prism (реакция-синтаксис-маркер поддерживает его)

      import React from 'react'

import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
import { dark } from 'react-syntax-highlighter/dist/esm/styles/prism'

const RubyCode = () => {
  const rubyCode = `
    class Food
      attr_accessor :protein

      def initialize(protein)
        @protein = protein
      end
    end`

  return (
    <SyntaxHighlighter language="ruby" style={dark}>
      {rubyCode}
    </SyntaxHighlighter>
  )
}

export default RubyCode