CodeBlock.tsx
For the full content of this gist, refer to https://gist.github.com/CodingAbdullah/480de329fcf837d625fad168eacdb189
McMaster. Software Engineer with a keen interest in blockchain and web3.
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
// Custom code block component for handling code in MDX files
// Visual Studio Code Dark Plus theme
const CodeBlock = ({ className = '', children }: { className?: string; children: string }) => {
const match = /language-(\w+)/.exec(className || '')
return (
<SyntaxHighlighter
language={match?.[1] || 'text'}
style={vscDarkPlus}
className="rounded-lg"
>
{String(children).trim()}
</SyntaxHighlighter>
)
}
export default CodeBlock;