diff options
| author | nsfisis <nsfisis@gmail.com> | 2024-08-18 14:03:36 +0900 |
|---|---|---|
| committer | nsfisis <nsfisis@gmail.com> | 2024-08-18 14:03:38 +0900 |
| commit | c11fcbae922a77b22dc51fc5d988a5646ed78935 (patch) | |
| tree | 4aa46edcb99d8d8da977a28ee9d8b58219c75336 /frontend/app/components/Gaming/CodeBlock.tsx | |
| parent | e20a0196cdd4a19636a12bcc392d79a803fd868e (diff) | |
| download | phperkaigi-2025-albatross-c11fcbae922a77b22dc51fc5d988a5646ed78935.tar.gz phperkaigi-2025-albatross-c11fcbae922a77b22dc51fc5d988a5646ed78935.tar.zst phperkaigi-2025-albatross-c11fcbae922a77b22dc51fc5d988a5646ed78935.zip | |
feat(frontend): syntax highlight for code block in watch page
Diffstat (limited to 'frontend/app/components/Gaming/CodeBlock.tsx')
| -rw-r--r-- | frontend/app/components/Gaming/CodeBlock.tsx | 13 |
1 files changed, 11 insertions, 2 deletions
diff --git a/frontend/app/components/Gaming/CodeBlock.tsx b/frontend/app/components/Gaming/CodeBlock.tsx index 20cd425..b193774 100644 --- a/frontend/app/components/Gaming/CodeBlock.tsx +++ b/frontend/app/components/Gaming/CodeBlock.tsx @@ -1,11 +1,20 @@ +import Prism, { highlight, languages } from "prismjs"; +import "prismjs/components/prism-swift"; +import "prismjs/themes/prism.min.css"; + +Prism.manual = true; + type Props = { code: string; + language: string; }; -export default function CodeBlock({ code }: Props) { +export default function CodeBlock({ code, language }: Props) { + const highlighted = highlight(code, languages[language]!, language); + return ( <pre className="bg-white resize-none h-full w-full rounded-lg border border-gray-300 p-2"> - <code>{code}</code> + <code dangerouslySetInnerHTML={{ __html: highlighted }} /> </pre> ); } |