React如何使用Prism.js使代码高亮

一. Prism.js安装

首先确保你的 React 应用能正常运行，然后安装 prismjs 组件。

npm install prismjs
# 或者
yarn add prismjs

二. 定义高亮组件

定义一个组件专门用来亮代码，只需要传入语言类型和需要高亮的代码即可。

import React, {useEffect} from 'react';
import Prism from 'prismjs';

// 选择 prismjs 主题，可选主题包括：
// prism prism-coy prism-dark prism-funky prism-okaidia
// prism-solarizedlight prism-tomorrow prism-twilight
import 'prismjs/themes/prism-okaidia.min.css';

// 按需导入需要高亮的语言，这里只导入了 bash 和 javascript
import 'prismjs/components/prism-bash';
import 'prismjs/components/prism-javascript';

function CodeHighlighter(props) {
  useEffect(() => {
    Prism.highlightAll();
  }, []);

  return (
    <pre style={{margin: 0}}>
      <code className={`language-${props.language}`}>
        {props.code}
      </code>
    </pre>
  );
}

export default CodeHighlighter;

三. 使用高亮组件

直接使用 CodeHighlighter 组件，传入 language 和 code 即可。

import React from 'react';
import CodeHighlighter from './CodeHighlighter';

const code = `
  function greet() {
    console.log('Hello, world!');
  }
`;

function App() {
  return (
    <div>
      <h1>Code Highlighting JavaScript Example</h1>
      <CodeHighlighter language="javascript" code={code} />
    </div>
  );
}

export default App;