diff options
| -rw-r--r-- | frontend/app/components/Gaming/CodeBlock.tsx | 13 | ||||
| -rw-r--r-- | frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx | 4 | ||||
| -rw-r--r-- | frontend/package-lock.json | 16 | ||||
| -rw-r--r-- | frontend/package.json | 2 |
4 files changed, 31 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> ); diff --git a/frontend/package-lock.json b/frontend/package-lock.json index b706788..ad96c48 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -16,6 +16,7 @@ "isbot": "^5.1.13", "jwt-decode": "^4.0.0", "openapi-fetch": "^0.10.2", + "prismjs": "^1.29.0", "react": "^18.3.1", "react-dom": "^18.3.1", "react-use-websocket": "^4.8.1", @@ -27,6 +28,7 @@ "devDependencies": { "@biomejs/biome": "^1.8.3", "@remix-run/dev": "^2.10.3", + "@types/prismjs": "^1.26.4", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@typescript-eslint/eslint-plugin": "^6.7.4", @@ -2288,6 +2290,12 @@ "undici-types": "~5.26.4" } }, + "node_modules/@types/prismjs": { + "version": "1.26.4", + "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.4.tgz", + "integrity": "sha512-rlAnzkW2sZOjbqZ743IHUhFcvzaGbqijwOu8QZnZCjfQzBqFE3s4lOTJEsxikImav9uzz/42I+O7YUs1mWgMlg==", + "dev": true + }, "node_modules/@types/prop-types": { "version": "15.7.12", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz", @@ -8959,6 +8967,14 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/prismjs": { + "version": "1.29.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz", + "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==", + "engines": { + "node": ">=6" + } + }, "node_modules/proc-log": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-3.0.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index b8b9e93..5022494 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -24,6 +24,7 @@ "isbot": "^5.1.13", "jwt-decode": "^4.0.0", "openapi-fetch": "^0.10.2", + "prismjs": "^1.29.0", "react": "^18.3.1", "react-dom": "^18.3.1", "react-use-websocket": "^4.8.1", @@ -35,6 +36,7 @@ "devDependencies": { "@biomejs/biome": "^1.8.3", "@remix-run/dev": "^2.10.3", + "@types/prismjs": "^1.26.4", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@typescript-eslint/eslint-plugin": "^6.7.4", |