Pengi UI

重要提示 / Important Notice

⚠️ 必须引入样式文件 / Style Import Required

使用本组件库时，请确保在您的项目中引入 KaTeX 样式文件：

import 'katex/dist/katex.min.css';

或在 HTML 中添加：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-nB0miv6/jRmo5UMMR1wu3Gz6NLsoTkbqJghGIsx//Rlm+ZU03BU6SQNC66uf4l5+" crossorigin="anonymous">

如果不引入此样式文件，数学公式将无法正确显示。

使用示例 / Usage Example

import React from 'react';
import { PengiMarkdown } from 'pengi-ui';
import 'katex/dist/katex.min.css'; // 必须引入！

function App() {
  const markdownContent = `
# 标题示例

这是一个包含数学公式的文档。

行内公式：$E = mc^2$

块级公式：
$$
\\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}
$$

**代码示例：**
\`\`\`javascript
function hello() {
  console.log('Hello, Pengi UI!');
}
\`\`\`
  `;

  return (
    <div className="app">
      <PengiMarkdown content={markdownContent} />
    </div>
  );
}

export default App;