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 | |
| parent | e20a0196cdd4a19636a12bcc392d79a803fd868e (diff) | |
| download | iosdc-japan-2024-albatross-c11fcbae922a77b22dc51fc5d988a5646ed78935.tar.gz iosdc-japan-2024-albatross-c11fcbae922a77b22dc51fc5d988a5646ed78935.tar.zst iosdc-japan-2024-albatross-c11fcbae922a77b22dc51fc5d988a5646ed78935.zip | |
feat(frontend): syntax highlight for code block in watch page
Diffstat (limited to 'frontend/app')
| -rw-r--r-- | frontend/app/components/Gaming/CodeBlock.tsx | 13 | ||||
| -rw-r--r-- | frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx | 4 |
2 files changed, 13 insertions, 4 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> ); } diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx index b2598fc..2bc5d55 100644 --- a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx +++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx @@ -88,7 +88,7 @@ export default function GolfWatchAppGaming({ bgB="bg-purple-400" /> <div className="grow grid grid-cols-3 p-4 gap-4"> - <CodeBlock code={playerInfoA.code ?? ""} /> + <CodeBlock code={playerInfoA.code ?? ""} language="swift" /> <div className="flex flex-col gap-4 justify-between"> <div className="grid grid-cols-2 gap-4"> <SubmitResult result={playerInfoA.submitResult} /> @@ -101,7 +101,7 @@ export default function GolfWatchAppGaming({ <BorderedContainer>{problemDescription}</BorderedContainer> </div> </div> - <CodeBlock code={playerInfoB.code ?? ""} /> + <CodeBlock code={playerInfoB.code ?? ""} language="swift" /> </div> </div> ); |