velxio/frontend/src/components/layout/CodeBlock.tsx

28 lines
718 B
TypeScript

import React from 'react';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
interface CodeBlockProps {
children: string;
language?: string;
}
const codeStyle: React.CSSProperties = {
margin: '16px 0',
borderRadius: '8px',
fontSize: '13px',
fontFamily: 'var(--mono, monospace)',
};
export const CodeBlock: React.FC<CodeBlockProps> = ({ children, language = 'text' }) => (
<SyntaxHighlighter
language={language}
style={vscDarkPlus}
customStyle={codeStyle}
showLineNumbers={language !== 'text' && language !== 'bash'}
wrapLongLines
>
{children.trim()}
</SyntaxHighlighter>
);