如何用Material-UI渲染JS代码片段及React+Highlight.js格式化代码块

步骤1：安装必要依赖 #

首先确保你已经安装了highlight.js，如果还没装，执行下面的命令：

npm install highlight.js
# 或者用yarn
yarn add highlight.js

步骤2：封装可复用的CodeBlock组件 #

我们可以创建一个通用的代码块组件，把Material-UI的样式控制和Highlight.js的高亮功能整合在一起：

import React, { useEffect, useRef } from 'react';
import hljs from 'highlight.js';
import 'highlight.js/styles/github-dark.css'; // 选你喜欢的高亮主题，比如monokai、atom-one-dark都可以
import { Box, Typography } from '@mui/material';

const CodeBlock = ({ code, language = 'javascript' }) => {
  const codeRef = useRef(null);

  useEffect(() => {
    if (codeRef.current) {
      hljs.highlightElement(codeRef.current);
    }
  }, [code, language]);

  return (
    <Box
      sx={{
        backgroundColor: '#1e1e1e', // 匹配github-dark主题的背景色
        borderRadius: 1,
        padding: 2,
        overflowX: 'auto', // 代码过长时允许横向滚动
        marginY: 2,
      }}
    >
      <Typography variant="body2" component="pre" sx={{ margin: 0 }}>
        <code
          ref={codeRef}
          className={`hljs ${language}`}
        >
          {code}
        </code>
      </Typography>
    </Box>
  );
};

export default CodeBlock;

组件逻辑说明： #

• Highlight.js配置：导入主题样式后，代码会自动应用对应的高亮配色，你可以替换成Highlight.js提供的其他内置主题。
• Material-UI样式控制：用Box组件实现代码块的容器样式，包括深色背景、圆角、内边距，确保在不同屏幕尺寸下都有良好的显示效果。
• 高亮触发逻辑：通过useRef获取代码元素的DOM节点，在useEffect中调用hljs.highlightElement完成高亮，当代码内容或语言类型变化时会自动重新高亮。

步骤3：使用组件渲染JavaScript代码片段 #

现在你可以在任意React组件中调用这个CodeBlock组件，轻松渲染单行或多行JS代码：

import CodeBlock from './CodeBlock';

const DemoComponent = () => {
  // 单行代码示例
  const singleLineCode = 'const message = "Hello from Material-UI + Highlight.js!";';

  // 多行代码示例（用模板字符串包裹，记得trim掉首尾多余空格）
  const multiLineCode = `
const fetchData = async () => {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    console.log('Fetched data:', data);
    return data;
  } catch (error) {
    console.error('Fetch error:', error);
    throw error;
  }
};
  `.trim();

  return (
    <div>
      <h3>单行JavaScript代码</h3>
      <CodeBlock code={singleLineCode} />

      <h3>多行JavaScript代码</h3>
      <CodeBlock code={multiLineCode} />
    </div>
  );
};

export default DemoComponent;

额外优化提示 #

• 若要支持其他编程语言，只需修改language属性即可，比如language="python"或language="html"。
• 可以根据自己的设计需求调整Box的sx样式，比如修改背景色、字体大小、内边距等。
• 如果需要添加代码复制功能，可以在CodeBlock组件中加入MUI的IconButton，结合navigator.clipboard.writeText实现一键复制。

内容的提问来源于stack exchange，提问作者Vu Le Anh