Highlight.js不使用react-markdown

Question

我使用react-syntax-highlighter@15.4.3进行语法突出显示。代码如下：

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}}/>

我希望它能检测到react-markdown自动提供给它的语言，但它没有检测到该语言，因此代码没有被美化。

我应该怎么做才能让它开始自动检测语言？

Answer 1

我在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} />
  }
}