Claude CodeandClaude
1a2c6fd3f9
## 修复内容
### 问题分析
- MDXComponents.js第274行的`code`组件实现有误
- 直接传递所有props给`<Highlight>`导致`children is not a function`错误
- prism-react-renderer的Highlight组件需要children作为渲染函数
### 解决方案
- 重写`code`组件，正确处理children和className
- 正确解析language-xxx className提取语言类型
- 正确渲染Highlight组件，提供完整的渲染函数
- 正确处理token和line的key属性
### 技术实现
```javascript
code: ({ className, children, ...props }) => {
const match = /language-(\w+)/.exec(className || '');
const codeString = children?.trim() || '';
return (
<Highlight code={codeString} language={(match && match[1]) || 'javascript'} {...props}>
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<pre className={className} style={style}>
{tokens.map((line, i) => (
<div key={i} {...getLineProps({ line, key: i })}>
{line.map((token, key) => (
<span key={key} {...getTokenProps({ token, key })} />
))}
</div>
))}
</pre>
)}
</Highlight>
);
}
```
### 测试结果
✅ http://localhost:3011/docs/foundations/what-is-react - 正常访问
✅ http://localhost:3011/components-demo - 正常访问
✅ http://localhost:3011/ - 正常访问
✅ 所有代码块正确渲染，无JavaScript错误
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Website
This website is built using Docusaurus, a modern static website generator.
Installation
yarn
Local Development
yarn start
This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
Build
yarn build
This command generates static content into the build directory and can be served using any static contents hosting service.
Deployment
Using SSH:
USE_SSH=true yarn deploy
Not using SSH:
GIT_USER=<Your GitHub username> yarn deploy
If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the gh-pages branch.