Highlight.js 不适用于 react-markdown

问题描述

我使用 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 自动提供给它的语言，但它没有检测到语言，因此代码没有被美化。

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

解决方法

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