diff options
Diffstat (limited to 'frontend/app/components')
| -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> ); |