Stevan Freeborn
1c5d57e4ed
Add prop to fence component called content which will hold the content contained within the fence component. Update code snippet component so that it filters the fence components passed to it as children to only display the fence component that is same language as the selected language and pass the content prop of the fence component to the copy code button component on each render of the snippet component.
28 lines
576 B
TypeScript
28 lines
576 B
TypeScript
import Prism from 'prismjs';
|
|
import 'prismjs/components/prism-bash';
|
|
import 'prismjs/components/prism-csharp';
|
|
import 'prismjs/components/prism-json';
|
|
import 'prismjs/components/prism-python';
|
|
import './prism-custom.css';
|
|
|
|
export default function Fence({
|
|
content,
|
|
language,
|
|
}: {
|
|
content: string;
|
|
language: string;
|
|
}) {
|
|
const html = Prism.highlight(
|
|
content,
|
|
Prism.languages[language],
|
|
language
|
|
);
|
|
return (
|
|
<code
|
|
className={`language-${language}`}
|
|
dangerouslySetInnerHTML={{ __html: html }}
|
|
content={content}
|
|
></code>
|
|
);
|
|
}
|