import { h } from 'preact' ; import Prism from 'prismjs' ; import 'prismjs/components/prism-javascript' ; import 'prismjs/components/prism-css' ; import 'prismjs/components/prism-scss' ; import 'prismjs/components/prism-json' ; import 'prismjs/themes/prism-tomorrow.css' ; import style from './markdown.module.css' ; type PrismProps = { language ? : string | null ; code : string ; } ; export default function PrismComponent ( { language , code } ) { let lines = [ ] ; if ( language && Prism . languages [ language ] ) { lines = Prism . highlight ( code , Prism . languages [ language ] , language ) . replace ( /<span class="([a-z ]+)">([^<]*)<\/span>/g , ( _ , className , contents ) => contents . split ( '\n' ) . map ( ( l ) => `<span class="${ className }">${ l }</span>` ) . join ( '\n' ) ) . split ( '\n' ) ; } else { lines = code . replace ( /</g , '&lt;' ) . replace ( />/g , '&gt;' ) . split ( '\n' ) ; } return ( < pre className = { style . codeblock } > < code > { lines . map ( ( line , i ) => ( < div className = { style . line } > < div className = { style . lineNumber } > { i + 1 } < /div> < div className = { style . lineContent } dangerouslySetInnerHTML = { { __html : line } } /> < /div>))} < /code> < /pre>); } if ( ! import . meta . env . SSR ) { delete window . Prism ; }