import React from 'react' ; import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter' ; import { prism as theme } from 'react-syntax-highlighter/dist/esm/styles/prism' ; import js from 'react-syntax-highlighter/dist/esm/languages/prism/javascript' ; import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx' ; SyntaxHighlighter . registerLanguage ( 'javascript' , js ) ; SyntaxHighlighter . registerLanguage ( 'jsx' , jsx ) ; interface CodeBlockProps { language ? : string ; value : string ; } const CodeBlock = ( { language , value = '' } ) => { if ( ! language ) language = 'text' ; return ( < SyntaxHighlighter language = { language } style = { theme } > { value } < /SyntaxHighlighter>); } ; export default CodeBlock ;