展示代码高亮的库 react-syntax-highlighter

397 阅读1分钟

运行结果

image.png

环境与版本

NODE版本: 18.20.0, "react-syntax-highlighter": "^15.5.0", antd: ^5.4.0" 版本应该没啥问题, 这类组件应该很难遇到版本导致运行出错

源代码

import React from 'react';
import SyntaxHighlighter from 'react-syntax-highlighter';
import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';

const codeString = `
    export default function HighLighterComponent() {
      return (
        <div>
          <SyntaxHighlighter language="javascript" style={docco}>
            {codeString}
          </SyntaxHighlighter>
        </div>
      );
    }
`;

export default function HighLighterComponent() {
  return (
    <div>
      <SyntaxHighlighter language="javascript" style={docco} showLineNumbers={true} className="custome-className">
        {codeString}
      </SyntaxHighlighter>
    </div >
  );
}