React Syntax Highlighter only highlighting JS code

Question

I want to highlight some Ruby code, but for the life of me, its not working. In fact, it only seems to highlight 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>
  );
}

Am I doing something wrong? Been stuck on this for about 3 hours now... no avail :(

Answer 1

What's about using Prism (react-syntax-highlighter supports it)

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