Highlight.js not working with react-markdown

Question

I am using [email protected] for syntax highlighting. Below is the code:

import React, { PureComponent } from "react";
import PropTypes from "prop-types";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { docco } from "react-syntax-highlighter/dist/cjs/styles/hljs";

class CodeBlock extends PureComponent {
  static propTypes = {
    value: PropTypes.string.isRequired,
    language: PropTypes.string
  };

  static defaultProps = {
    language: null
  };

  render() {
    const { language, value } = this.props;
    return (
      <SyntaxHighlighter style={docco}>
        {value}
      </SyntaxHighlighter>
    );
  }
}

export default CodeBlock;

<ReactMarkdown source={this.state.post.description} renderers={{CodeBlock}}/>

I expect it to detect the language automatically supplied to it by react-markdown, but it is not detecting the language and hence the code is not beautified.

What should I do so it starts detecting the language by itself?

Answer 1

I have found the below answer in the documentation of react-markdown:

import React from 'react'
import ReactMarkdown from 'react-markdown'
import SyntaxHighlighter from 'react-syntax-highlighter'
import {docco} from 'react-syntax-highlighter/dist/esm/styles/hljs'
import {render} from 'react-dom'
 
export const renderers = {
  code: ({language, value}) => {
    return <SyntaxHighlighter style={docco} language={language} children={value} />
  }
}