50 lines
1.8 KiB
TypeScript
50 lines
1.8 KiB
TypeScript
import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light';
|
|
import { oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
|
|
import tsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx';
|
|
import typescript from 'react-syntax-highlighter/dist/esm/languages/prism/typescript';
|
|
import javascript from 'react-syntax-highlighter/dist/esm/languages/prism/javascript';
|
|
import json from 'react-syntax-highlighter/dist/esm/languages/prism/json';
|
|
import bash from 'react-syntax-highlighter/dist/esm/languages/prism/bash';
|
|
import sql from 'react-syntax-highlighter/dist/esm/languages/prism/sql';
|
|
import css from 'react-syntax-highlighter/dist/esm/languages/prism/css';
|
|
|
|
// 只注册 AI 对话里常用的语言，避免 @ant-design/x 的 CodeHighlighter
|
|
// 把所有 prism 语言都打进主包
|
|
SyntaxHighlighter.registerLanguage('tsx', tsx);
|
|
SyntaxHighlighter.registerLanguage('typescript', typescript);
|
|
SyntaxHighlighter.registerLanguage('javascript', javascript);
|
|
SyntaxHighlighter.registerLanguage('json', json);
|
|
SyntaxHighlighter.registerLanguage('bash', bash);
|
|
SyntaxHighlighter.registerLanguage('shell', bash);
|
|
SyntaxHighlighter.registerLanguage('sql', sql);
|
|
SyntaxHighlighter.registerLanguage('css', css);
|
|
|
|
const SUPPORTED_LANGUAGES = new Set([
|
|
'tsx',
|
|
'typescript',
|
|
'javascript',
|
|
'json',
|
|
'bash',
|
|
'shell',
|
|
'sql',
|
|
'css',
|
|
]);
|
|
|
|
interface LiteCodeHighlighterProps {
|
|
lang?: string;
|
|
children: string;
|
|
}
|
|
|
|
export function LiteCodeHighlighter({ lang, children }: LiteCodeHighlighterProps) {
|
|
const language = lang && SUPPORTED_LANGUAGES.has(lang) ? lang : undefined;
|
|
return (
|
|
<SyntaxHighlighter
|
|
language={language}
|
|
style={oneLight}
|
|
customStyle={{ margin: '12px 0', borderRadius: 8, fontSize: 13 }}
|
|
>
|
|
{children}
|
|
</SyntaxHighlighter>
|
|
);
|
|
}
|