代码生成图片工具 - 雨和三号线

编辑代码

// 增强高亮版代码生成工具
import React from 'react';

// 高性能组件示例
const CodeSnippet = ({ language, content }) => {
  // 使用React的useState管理高亮状态
  const [highlighted, setHighlighted] = React.useState(false);
  
  // 使用useEffect在代码变化时重新高亮
  React.useEffect(() => {
    if (content && content.length > 0) {
      const highlight = async () => {
        await hljs.highlightAll();
        setHighlighted(true);
      };
      
      highlight();
    }
  }, [content, language]);
  
  // 渲染代码组件
  return (
    <div className="snippet-container">
      <div className="header">
        <span className="lang-indicator">{language}</span>
      </div>
      <pre className={`hljs language-${language}`}>
        <code className="code-content">{content}</code>
      </pre>
    </div>
  );
};

// 导出组件
export default CodeSnippet;

语法主题

Material

Monokai

Nord

Ocean

Purple

Forest

字体大小

16px

行号显示

开启

关闭

高清预览

code-snippet.js

// 生成代码图片将显示在这里