52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
|
|
import { gruvboxDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
|
|
|
|
interface CodeBlockProps {
|
|
code: string;
|
|
language: string;
|
|
}
|
|
|
|
const CodeBlock = ({ code, language }: CodeBlockProps) => {
|
|
// Map common language aliases
|
|
const normalizeLanguage = (lang: string): string => {
|
|
const langMap: Record<string, string> = {
|
|
'js': 'javascript',
|
|
'ts': 'typescript',
|
|
'py': 'python',
|
|
'rb': 'ruby',
|
|
'sh': 'bash',
|
|
'shell': 'bash',
|
|
'yml': 'yaml',
|
|
'md': 'markdown',
|
|
};
|
|
return langMap[lang.toLowerCase()] || lang.toLowerCase();
|
|
};
|
|
|
|
const normalizedLang = normalizeLanguage(language);
|
|
|
|
return (
|
|
<div className="relative my-2 rounded-md overflow-hidden border border-primary/30">
|
|
<div className="flex items-center justify-between px-3 py-1 bg-primary/10 border-b border-primary/30">
|
|
<span className="text-xs text-primary/70 font-pixel">{language || 'code'}</span>
|
|
</div>
|
|
<SyntaxHighlighter
|
|
language={normalizedLang}
|
|
style={gruvboxDark}
|
|
customStyle={{
|
|
margin: 0,
|
|
padding: '1rem',
|
|
background: 'rgba(29, 32, 33, 0.9)',
|
|
fontSize: '0.75rem',
|
|
borderRadius: 0,
|
|
}}
|
|
wrapLongLines
|
|
showLineNumbers={code.split('\n').length > 5}
|
|
>
|
|
{code}
|
|
</SyntaxHighlighter>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CodeBlock;
|