prism-react-renderer

简介

代码高亮库prism.js的react包装

项目地址：https://github.com/FormidableLabs/prism-react-renderer

使用示例

import { Highlight, themes } from "prism-react-renderer";
import Prism from 'prismjs';  // 可选：用于自定义 Prism 实例
import 'prismjs/components/prism-csharp'; // 示例：添加额外语言支持

const codeBlock = `
const GroceryItem: React.FC<GroceryItemProps> = ({ item }) => {
  return (
    <div>
      <h2>{item.name}</h2>
      <p>Price: {item.price}</p>
      <p>Quantity: {item.quantity}</p>
    </div>
  );
}
`;

// 完整 props 使用示例
<Highlight
  theme={themes.shadesOfPurple} // 主题对象（可选）
  code={codeBlock}              // 必需：要高亮的代码字符串
  language="tsx"                // 必需：代码语言标识
  prism={Prism}                 // 可选：自定义 Prism 实例（用于扩展语言）
>
  {({
    className,     // 要应用于 <pre> 的类名
    style,         // 合并后的样式对象（主题 + 内联样式）
    tokens,        // 格式化后的代码令牌数组
    getLineProps,  // 获取行元素属性的函数
    getTokenProps  // 获取令牌元素属性的函数
  }) => (
    <pre className={className} style={{ ...style, padding: '20px' }}>
      {tokens.map((line, lineIndex) => (
        <div key={lineIndex} {...getLineProps({ line })}>
          {/* 行号展示 */}
          <span style={{ paddingRight: '1em', userSelect: 'none', opacity: 0.5 }}>
            {lineIndex + 1}
          </span>
          
          {/* 代码令牌 */}
          {line.map((token, tokenIndex) => (
            <span key={tokenIndex} {...getTokenProps({ token })} />
          ))}
        </div>
      ))}
    </pre>
  )}
</Highlight>

Props 使用

1. code (必需)
   • 类型：string
   • 作用：需要语法高亮的原始代码字符串
2. language (必需)
   • 类型：string
   • 作用：代码语言标识（如："tsx", "javascript"），需要与 Prism 支持的语言匹配
3. theme (可选)
   • 类型：PrismTheme
   • 默认：themes.github
   • 作用：主题对象，可以使用内置主题或自定义主题
4. prism (可选)
   • 类型：typeof Prism
   • 默认：内置 Prism 实例
   • 作用：自定义 Prism 实例（用于添加插件或扩展语言支持）
5. children (必需)
   • 类型：(props: RenderProps) => React.ReactNode
   • 参数包含：
     • className: 应用于外层 <pre> 的类名
     • style: 合并后的样式对象（主题样式 + 内联样式）
     • tokens: 代码令牌的嵌套数组结构 Token[][]
     • getLineProps: 函数，用于获取行元素的属性
     • getTokenProps: 函数，用于获取令牌元素的属性

扩展说明：

• 通过 prism prop 可以使用自定义配置的 Prism 实例，例如添加新语言：

  tsx

  复制

  import Prism from 'prismjs';
  import 'prismjs/components/prism-kotlin'; // 添加 Kotlin 支持
  
  <Highlight prism={Prism} language="kotlin" code={kotlinCode}...>

• 自定义主题时，可以创建类似结构的主题对象：

  tsx

  复制

  const customTheme = {
    plain: { ... },  // 基础样式
    styles: [ ... ]  // 语法规则样式
  };

• getLineProps 和 getTokenProps 可以接收自定义参数：

  tsx

  复制

  getLineProps({
    line,
    key: lineIndex,       // 应提供唯一 key
    className: 'custom-line-class',
    style: { background: 'red' }
  })