reactjs - 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，但它没有检测到语言，因此代码没有被美化。

我该怎么做才能开始自行检测语言？

标签： reactjsreact-markdownreact-syntax-highlighter

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