diff --git a/package.json b/package.json
index 651a8397..5ccfffec 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-icons": "5.0.1",
+    "react-syntax-highlighter": "15.5.0",
     "supertokens-auth-react": "0.36.1",
     "supertokens-node": "16.7.1",
     "supertokens-web-js": "0.8.0",
@@ -59,6 +60,7 @@
     "@types/micromatch": "4.0.6",
     "@types/node": "20.11.0",
     "@types/react-dom": "18.2.18",
+    "@types/react-syntax-highlighter": "^15",
     "@typescript-eslint/eslint-plugin": "6.18.1",
     "@typescript-eslint/parser": "6.18.1",
     "@willbooster/eslint-config-next": "1.1.0",
diff --git a/public/character.png b/public/character.png
new file mode 100644
index 00000000..b75d3b56
Binary files /dev/null and b/public/character.png differ
diff --git a/src/app/(withAuth)/courses/[courseId]/page.tsx b/src/app/(withAuth)/courses/[courseId]/page.tsx
index fc52c7b1..d854cda8 100644
--- a/src/app/(withAuth)/courses/[courseId]/page.tsx
+++ b/src/app/(withAuth)/courses/[courseId]/page.tsx
@@ -11,6 +11,7 @@ import {
   AccordionPanel,
 } from '@chakra-ui/react';
 import type { NextPage } from 'next';
+import NextLink from 'next/link';
 
 import { courseIdToProgramIdLists, programIdToName } from '../../../../problems/problemData';
 
@@ -32,7 +33,11 @@ const CoursePage: NextPage<{ params: { courseId: string } }> = async ({ params }
                 <AccordionPanel pb={4}>
                   <OrderedList>
                     {programIds.map((programId) => (
-                      <ListItem key={programId}>{programIdToName[programId]}</ListItem>
+                      <ListItem key={programId}>
+                        <NextLink passHref href={`/problems/${programId}`}>
+                          {programIdToName[programId]}
+                        </NextLink>
+                      </ListItem>
                     ))}
                   </OrderedList>
                 </AccordionPanel>
diff --git a/src/app/(withAuth)/problems/[problemId]/page.tsx b/src/app/(withAuth)/problems/[problemId]/page.tsx
new file mode 100644
index 00000000..237e3593
--- /dev/null
+++ b/src/app/(withAuth)/problems/[problemId]/page.tsx
@@ -0,0 +1,49 @@
+'use client';
+
+import { Box, Button, Flex, HStack, Heading, VStack } from '@chakra-ui/react';
+import type { NextPage } from 'next';
+
+import { SyntaxHighlighter } from '../../../../components/organisms/SyntaxHighlighter';
+import { TurtleGraphics } from '../../../../components/organisms/TurtleGraphics';
+import { programIdToName, generateProgram, getDescription } from '../../../../problems/problemData';
+
+const GRID_COLUMNS = 12;
+const GRID_ROWS = 8;
+const GRID_SIZE = 40;
+
+const ProblemPage: NextPage<{ params: { problemId: string } }> = ({ params }) => {
+  // TODO: 一旦Java固定 言語選択機能実装時に変更する
+  const programmingLanguageId = 'java';
+
+  return (
+    <main>
+      <VStack spacing="4">
+        <Heading as="h1">{programIdToName[params.problemId]}</Heading>
+        <Flex gap="6" w="100%">
+          <VStack spacing="10" w={GRID_COLUMNS * GRID_SIZE}>
+            <Box>{getDescription(params.problemId)}</Box>
+            <Box>
+              <TurtleGraphics characters={[]} gridColumns={GRID_COLUMNS} gridRows={GRID_ROWS} gridSize={GRID_SIZE} />
+            </Box>
+          </VStack>
+          <VStack align="end" minW="50%" overflow="hidden">
+            <Button colorScheme="gray">解説</Button>
+            {/* 画面に収まる高さに設定 */}
+            <Box h="calc(100vh - 370px)" w="100%">
+              <SyntaxHighlighter
+                code={generateProgram(params.problemId, programmingLanguageId)}
+                programmingLanguageId={programmingLanguageId}
+              />
+            </Box>
+            <HStack>
+              <Button colorScheme="gray">リセット</Button>
+              <Button colorScheme="gray">解答</Button>
+            </HStack>
+          </VStack>
+        </Flex>
+      </VStack>
+    </main>
+  );
+};
+
+export default ProblemPage;
diff --git a/src/app/lib/Character.ts b/src/app/lib/Character.ts
index 6ad15482..07bdca9d 100644
--- a/src/app/lib/Character.ts
+++ b/src/app/lib/Character.ts
@@ -1,10 +1,19 @@
+export const CharacterColor = {
+  Red: 'red',
+  Blue: 'blue',
+  Green: 'green',
+  Yellow: 'yellow',
+  Purple: 'purple',
+};
+type Color = (typeof CharacterColor)[keyof typeof CharacterColor];
+
 export class Character {
   id: number;
   name: string;
   x: number;
   y: number;
   direction: string;
-  color: string;
+  color: Color;
   penDown: boolean;
   path: string[];
 
@@ -136,6 +145,10 @@ export class Character {
     }
   }
 
+  setColor(color: Color): void {
+    this.color = color;
+  }
+
   putPen(): void {
     this.penDown = true;
   }
@@ -143,4 +156,22 @@ export class Character {
   upPen(): void {
     this.penDown = false;
   }
+
+  rotateCss(): string {
+    switch (this.direction) {
+      case 'up': {
+        return 'rotate(180deg)';
+      }
+      case 'down': {
+        return 'rotate(0deg)';
+      }
+      case 'left': {
+        return 'rotate(90deg)';
+      }
+      case 'right': {
+        return 'rotate(270deg)';
+      }
+    }
+    return '';
+  }
 }
diff --git a/src/app/lib/TurtleGraphicsCell.ts b/src/app/lib/TurtleGraphicsCell.ts
new file mode 100644
index 00000000..cff9cbd0
--- /dev/null
+++ b/src/app/lib/TurtleGraphicsCell.ts
@@ -0,0 +1,21 @@
+import type { CharacterColor } from './Character';
+
+type Color = (typeof CharacterColor)[keyof typeof CharacterColor];
+
+export class TurtleGraphicsCell {
+  id: number;
+  x: number;
+  y: number;
+  backgroundColor: string;
+
+  constructor(id: number, x: number, y: number, backgroundColor: string) {
+    this.id = id;
+    this.x = x;
+    this.y = y;
+    this.backgroundColor = backgroundColor;
+  }
+
+  setBackgroundColor(color: Color): void {
+    this.backgroundColor = color;
+  }
+}
diff --git a/src/components/organisms/SyntaxHighlighter.tsx b/src/components/organisms/SyntaxHighlighter.tsx
new file mode 100644
index 00000000..1eba52e1
--- /dev/null
+++ b/src/components/organisms/SyntaxHighlighter.tsx
@@ -0,0 +1,47 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+import { Prism } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+
+interface SyntaxHighlighterProps {
+  code: string;
+  programmingLanguageId: string;
+}
+
+export const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({
+  code: code,
+  programmingLanguageId: programmingLanguageId,
+}) => {
+  return (
+    <Box h="100%">
+      <Prism
+        codeTagProps={{ style: { fontSize: '1rem' } }}
+        customStyle={{
+          backgroundColor: '#011627',
+          marginTop: 0,
+          overflow: 'auto',
+          padding: 10,
+          height: '100%',
+        }}
+        language={programmingLanguageId === 'c' ? 'cpp' : programmingLanguageId}
+        lineNumberStyle={{ paddingRight: 0, marginRight: 16, minWidth: '1rem' }}
+        // lineProps={(lineNumber) => {
+        lineProps={() => {
+          const style = {
+            padding: 0,
+          };
+          // TODO: チェックポイント問題・ステップ問題のハイライト
+          // if (isStepPage && problem && lineNumber === problem.traceList[highlightedLineCount].row + 1) {
+          //   style.backgroundColor = '#744210';
+          // }
+          return { style };
+        }}
+        showLineNumbers={true}
+        style={vscDarkPlus}
+        wrapLines={true}
+      >
+        {code ?? ''}
+      </Prism>
+    </Box>
+  );
+};
diff --git a/src/components/organisms/TurtleGraphics.tsx b/src/components/organisms/TurtleGraphics.tsx
index 8e777533..2323fcc3 100644
--- a/src/components/organisms/TurtleGraphics.tsx
+++ b/src/components/organisms/TurtleGraphics.tsx
@@ -1,9 +1,11 @@
 'use client';
 
 import { Box, Grid, GridItem } from '@chakra-ui/react';
-import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import React, { useState } from 'react';
 
 import { Character } from '../../app/lib/Character';
+import { TurtleGraphicsCell } from '../../app/lib/TurtleGraphicsCell';
 
 // 原点（左上隅）の座標
 const ORIGIN_X = 1;
@@ -14,6 +16,7 @@ interface TurtleGraphicsProps {
   gridColumns?: number;
   gridRows?: number;
   gridSize?: number;
+  isEnableOperation?: boolean;
 }
 
 export const TurtleGraphics: React.FC<TurtleGraphicsProps> = ({
@@ -21,27 +24,16 @@ export const TurtleGraphics: React.FC<TurtleGraphicsProps> = ({
   gridColumns: gridColumns = 12,
   gridRows: gridRows = 8,
   gridSize: gridSize = 40,
+  isEnableOperation: isEnableOperation = false,
 }) => {
   const [characters, setCharacters] = useState(initialCharacters);
-
-  useEffect(() => {
-    // 軌跡の描画
-    for (const character of characters) {
-      if (!character.penDown) continue;
-
-      for (const position of character.path) {
-        const [x, y] = position.split(',').map(Number);
-        const gridCell = document.querySelectorAll('.grid-cell')[
-          x - ORIGIN_X + (y - ORIGIN_Y) * gridColumns
-        ] as HTMLElement;
-
-        if (!gridCell) return;
-
-        gridCell.style.backgroundColor = character.color;
-        gridCell.style.opacity = '0.5';
-      }
-    }
-  }, [characters, gridColumns]);
+  const [cells] = useState<TurtleGraphicsCell[]>(
+    Array.from({ length: gridColumns * gridRows }).map((_, index) => {
+      const x = (index % gridColumns) + ORIGIN_X;
+      const y = Math.floor(index / gridColumns) + ORIGIN_Y;
+      return new TurtleGraphicsCell(index, x, y, '');
+    })
+  );
 
   const updateCharacter = (character: Character, updater: (char: Character) => void): void => {
     setCharacters((prevCharacters) =>
@@ -108,8 +100,14 @@ export const TurtleGraphics: React.FC<TurtleGraphicsProps> = ({
         templateColumns={`repeat(${gridColumns}, ${gridSize}px)`}
         templateRows={`repeat(${gridRows}, ${gridSize}px)`}
       >
-        {Array.from({ length: gridColumns * gridRows }).map((_, index) => (
-          <GridItem key={index} borderColor="black" borderWidth="1px" className="grid-cell" />
+        {cells.map((cell) => (
+          <GridItem
+            key={cell.id}
+            backgroundColor={cell.backgroundColor}
+            borderColor="black"
+            borderWidth="1px"
+            className="grid-cell"
+          />
         ))}
         {characters.map((character) => (
           <Box
@@ -121,34 +119,38 @@ export const TurtleGraphics: React.FC<TurtleGraphicsProps> = ({
             top={(character.y - ORIGIN_Y) * gridSize + 'px'}
             w={gridSize + 'px'}
           >
-            {character.name}
+            <Box transform={character.rotateCss()}>
+              <Image alt={character.name} height={gridSize} src="/character.png" width={gridSize} />
+            </Box>
+            <Box position="absolute">{character.name}</Box>
           </Box>
         ))}
       </Grid>
-      {characters.map((character) => (
-        <div key={character.id}>
-          <div>{character.name}</div>
-          <div>
-            <button onClick={() => handleMoveForward(character)}>Move Forword</button>
-          </div>
-          <div>
-            <button onClick={() => handleMoveBack(character)}>Move Back</button>
+      {isEnableOperation &&
+        characters.map((character) => (
+          <div key={character.id}>
+            <div>{character.name}</div>
+            <div>
+              <button onClick={() => handleMoveForward(character)}>Move Forword</button>
+            </div>
+            <div>
+              <button onClick={() => handleMoveBack(character)}>Move Back</button>
+            </div>
+            <div>
+              <button onClick={() => handleTurnleft(character)}>Turn Left</button>
+            </div>
+            <div>
+              <button onClick={() => handleTurnRight(character)}>Turn Right</button>
+            </div>
+            <div>
+              <button onClick={() => handlePutPen(character)}>Put Pen</button>
+            </div>
+            <div>
+              <button onClick={() => handleUpPen(character)}>Up Pen</button>
+            </div>
+            <div> --- </div>
           </div>
-          <div>
-            <button onClick={() => handleTurnleft(character)}>Turn Left</button>
-          </div>
-          <div>
-            <button onClick={() => handleTurnRight(character)}>Turn Right</button>
-          </div>
-          <div>
-            <button onClick={() => handlePutPen(character)}>Put Pen</button>
-          </div>
-          <div>
-            <button onClick={() => handleUpPen(character)}>Up Pen</button>
-          </div>
-          <div> --- </div>
-        </div>
-      ))}
+        ))}
     </div>
   );
 };
diff --git a/src/problems/problemData.ts b/src/problems/problemData.ts
index 21b7775a..70a195d5 100644
--- a/src/problems/problemData.ts
+++ b/src/problems/problemData.ts
@@ -37,6 +37,10 @@ turtle.moveForward(5);` || programIdToLanguageIdToProgram[programId][languageId]
   );
 }
 
+export function getDescription(programId: ProgramId): string {
+  return programIdToLanguageIdToDescription[programId];
+}
+
 export function getExplanation(programId: ProgramId, languageId: LanguageId): string {
   return programIdToLanguageIdToExplanation[programId][languageId];
 }
@@ -76,6 +80,15 @@ public class Curve {
   },
 };
 
+export const programIdToLanguageIdToDescription: Record<ProgramId, string> = {
+  straight: `
+直線を描くプログラムです。
+`.trim(),
+  curve: `
+曲線を描くプログラムです。
+`.trim(),
+};
+
 export const programIdToLanguageIdToExplanation: Record<ProgramId, Record<LanguageId, string>> = {
   straight: {
     js: `
diff --git a/yarn.lock b/yarn.lock
index 100e6adf..7d0128ab 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1485,6 +1485,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.3.1":
+  version: 7.23.8
+  resolution: "@babel/runtime@npm:7.23.8"
+  dependencies:
+    regenerator-runtime: "npm:^0.14.0"
+  checksum: ba5e8fbb32ef04f6cab5e89c54a0497c2fde7b730595cc1af93496270314f13ff2c6a9360fdb2f0bdd4d6b376752ce3cf85642bd6b876969a6a62954934c2df8
+  languageName: node
+  linkType: hard
+
 "@babel/template@npm:^7.22.15":
   version: 7.22.15
   resolution: "@babel/template@npm:7.22.15"
@@ -4097,6 +4106,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/hast@npm:^2.0.0":
+  version: 2.3.9
+  resolution: "@types/hast@npm:2.3.9"
+  dependencies:
+    "@types/unist": "npm:^2"
+  checksum: 8660bd1ed2cd91ad4721c9d02ce88991e0950b07826bd5a85cde9e76fa226a47174f53c6d03e0a54b4668e5780fbdc352ae390a11c807e3c7d08c0f04d046259
+  languageName: node
+  linkType: hard
+
 "@types/json-schema@npm:*, @types/json-schema@npm:^7.0.12":
   version: 7.0.15
   resolution: "@types/json-schema@npm:7.0.15"
@@ -4189,6 +4207,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-syntax-highlighter@npm:^15":
+  version: 15.5.11
+  resolution: "@types/react-syntax-highlighter@npm:15.5.11"
+  dependencies:
+    "@types/react": "npm:*"
+  checksum: b091ac86d72fcc27ff77007577cc64f604ed9de5b7cc3f986301fe7fa7a2a42d1347fb0bf19ff2223c152f9468a42b796f44e97fe526073ee168a3ee64266518
+  languageName: node
+  linkType: hard
+
 "@types/react@npm:*":
   version: 18.2.45
   resolution: "@types/react@npm:18.2.45"
@@ -4228,6 +4255,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/unist@npm:^2":
+  version: 2.0.10
+  resolution: "@types/unist@npm:2.0.10"
+  checksum: 5f247dc2229944355209ad5c8e83cfe29419fa7f0a6d557421b1985a1500444719cc9efcc42c652b55aab63c931813c88033e0202c1ac684bcd4829d66e44731
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/eslint-plugin@npm:6.18.1":
   version: 6.18.1
   resolution: "@typescript-eslint/eslint-plugin@npm:6.18.1"
@@ -5381,6 +5415,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"character-entities-legacy@npm:^1.0.0":
+  version: 1.1.4
+  resolution: "character-entities-legacy@npm:1.1.4"
+  checksum: ea4ca9c29887335eed86d78fc67a640168342b1274da84c097abb0575a253d1265281a5052f9a863979e952bcc267b4ecaaf4fe233a7e1e0d8a47806c65b96c7
+  languageName: node
+  linkType: hard
+
+"character-entities@npm:^1.0.0":
+  version: 1.2.4
+  resolution: "character-entities@npm:1.2.4"
+  checksum: ad015c3d7163563b8a0ee1f587fb0ef305ef344e9fd937f79ca51cccc233786a01d591d989d5bf7b2e66b528ac9efba47f3b1897358324e69932f6d4b25adfe1
+  languageName: node
+  linkType: hard
+
+"character-reference-invalid@npm:^1.0.0":
+  version: 1.1.4
+  resolution: "character-reference-invalid@npm:1.1.4"
+  checksum: 29f05081c5817bd1e975b0bf61e77b60a40f62ad371d0f0ce0fdb48ab922278bc744d1fbe33771dced751887a8403f265ff634542675c8d7375f6ff4811efd0e
+  languageName: node
+  linkType: hard
+
 "charm@npm:~0.1.1":
   version: 0.1.2
   resolution: "charm@npm:0.1.2"
@@ -5594,6 +5649,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"comma-separated-tokens@npm:^1.0.0":
+  version: 1.0.8
+  resolution: "comma-separated-tokens@npm:1.0.8"
+  checksum: c3bcfeaa6d50313528a006a40bcc0f9576086665c9b48d4b3a76ddd63e7d6174734386c98be1881cbf6ecfc25e1db61cd775a7b896d2ea7a65de28f83a0f9b17
+  languageName: node
+  linkType: hard
+
 "commander@npm:11.1.0":
   version: 11.1.0
   resolution: "commander@npm:11.1.0"
@@ -6929,6 +6991,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fault@npm:^1.0.0":
+  version: 1.0.4
+  resolution: "fault@npm:1.0.4"
+  dependencies:
+    format: "npm:^0.2.0"
+  checksum: c86c11500c1b676787296f31ade8473adcc6784f118f07c1a9429730b6288d0412f96e069ce010aa57e4f65a9cccb5abee8868bbe3c5f10de63b20482c9baebd
+  languageName: node
+  linkType: hard
+
 "fclone@npm:1.0.11, fclone@npm:~1.0.11":
   version: 1.0.11
   resolution: "fclone@npm:1.0.11"
@@ -7048,6 +7119,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"format@npm:^0.2.0":
+  version: 0.2.2
+  resolution: "format@npm:0.2.2"
+  checksum: 6032ba747541a43abf3e37b402b2f72ee08ebcb58bf84d816443dd228959837f1cddf1e8775b29fa27ff133f4bd146d041bfca5f9cf27f048edf3d493cf8fee6
+  languageName: node
+  linkType: hard
+
 "framer-motion@npm:10.18.0":
   version: 10.18.0
   resolution: "framer-motion@npm:10.18.0"
@@ -7497,6 +7575,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hast-util-parse-selector@npm:^2.0.0":
+  version: 2.2.5
+  resolution: "hast-util-parse-selector@npm:2.2.5"
+  checksum: 29b7ee77960ded6a99d30c287d922243071cc07b39f2006f203bd08ee54eb8f66bdaa86ef6527477c766e2382d520b60ee4e4087f189888c35d8bcc020173648
+  languageName: node
+  linkType: hard
+
+"hastscript@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "hastscript@npm:6.0.0"
+  dependencies:
+    "@types/hast": "npm:^2.0.0"
+    comma-separated-tokens: "npm:^1.0.0"
+    hast-util-parse-selector: "npm:^2.0.0"
+    property-information: "npm:^5.0.0"
+    space-separated-tokens: "npm:^1.0.0"
+  checksum: f76d9cf373cb075c8523c8ad52709f09f7e02b7c9d3152b8d35c65c265b9f1878bed6023f215a7d16523921036d40a7da292cb6f4399af9b5eccac2a5a5eb330
+  languageName: node
+  linkType: hard
+
 "help-me@npm:^5.0.0":
   version: 5.0.0
   resolution: "help-me@npm:5.0.0"
@@ -7511,6 +7609,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"highlight.js@npm:^10.4.1, highlight.js@npm:~10.7.0":
+  version: 10.7.3
+  resolution: "highlight.js@npm:10.7.3"
+  checksum: 073837eaf816922427a9005c56c42ad8786473dc042332dfe7901aa065e92bc3d94ebf704975257526482066abb2c8677cc0326559bb8621e046c21c5991c434
+  languageName: node
+  linkType: hard
+
 "hoist-non-react-statics@npm:^3.3.1":
   version: 3.3.2
   resolution: "hoist-non-react-statics@npm:3.3.2"
@@ -7708,6 +7813,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-alphabetical@npm:^1.0.0":
+  version: 1.0.4
+  resolution: "is-alphabetical@npm:1.0.4"
+  checksum: 1505b1de5a1fd74022c05fb21b0e683a8f5229366bac8dc4d34cf6935bcfd104d1125a5e6b083fb778847629f76e5bdac538de5367bdf2b927a1356164e23985
+  languageName: node
+  linkType: hard
+
+"is-alphanumerical@npm:^1.0.0":
+  version: 1.0.4
+  resolution: "is-alphanumerical@npm:1.0.4"
+  dependencies:
+    is-alphabetical: "npm:^1.0.0"
+    is-decimal: "npm:^1.0.0"
+  checksum: d623abae7130a7015c6bf33d99151d4e7005572fd170b86568ff4de5ae86ac7096608b87dd4a1d4dbbd497e392b6396930ba76c9297a69455909cebb68005905
+  languageName: node
+  linkType: hard
+
 "is-array-buffer@npm:^3.0.1, is-array-buffer@npm:^3.0.2":
   version: 3.0.2
   resolution: "is-array-buffer@npm:3.0.2"
@@ -7797,6 +7919,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-decimal@npm:^1.0.0":
+  version: 1.0.4
+  resolution: "is-decimal@npm:1.0.4"
+  checksum: a4ad53c4c5c4f5a12214e7053b10326711f6a71f0c63ba1314a77bd71df566b778e4ebd29f9fb6815f07a4dc50c3767fb19bd6fc9fa05e601410f1d64ffeac48
+  languageName: node
+  linkType: hard
+
 "is-extglob@npm:^2.1.1":
   version: 2.1.1
   resolution: "is-extglob@npm:2.1.1"
@@ -7854,6 +7983,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-hexadecimal@npm:^1.0.0":
+  version: 1.0.4
+  resolution: "is-hexadecimal@npm:1.0.4"
+  checksum: ec4c64e5624c0f240922324bc697e166554f09d3ddc7633fc526084502626445d0a871fbd8cae52a9844e83bd0bb414193cc5a66806d7b2867907003fc70c5ea
+  languageName: node
+  linkType: hard
+
 "is-lambda@npm:^1.0.1":
   version: 1.0.1
   resolution: "is-lambda@npm:1.0.1"
@@ -8520,6 +8656,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lowlight@npm:^1.17.0":
+  version: 1.20.0
+  resolution: "lowlight@npm:1.20.0"
+  dependencies:
+    fault: "npm:^1.0.0"
+    highlight.js: "npm:~10.7.0"
+  checksum: 728bce6f6fe8b157f48d3324e597f452ce0eed2ccff1c0f41a9047380f944e971eb45bceb31f08fbb64d8f338dabb166f10049b35b92c7ec5cf0241d6adb3dea
+  languageName: node
+  linkType: hard
+
 "lru-cache@npm:^10.0.1, lru-cache@npm:^9.1.1 || ^10.0.0":
   version: 10.1.0
   resolution: "lru-cache@npm:10.1.0"
@@ -9283,6 +9429,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"parse-entities@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "parse-entities@npm:2.0.0"
+  dependencies:
+    character-entities: "npm:^1.0.0"
+    character-entities-legacy: "npm:^1.0.0"
+    character-reference-invalid: "npm:^1.0.0"
+    is-alphanumerical: "npm:^1.0.0"
+    is-decimal: "npm:^1.0.0"
+    is-hexadecimal: "npm:^1.0.0"
+  checksum: f85a22c0ea406ff26b53fdc28641f01cc36fa49eb2e3135f02693286c89ef0bcefc2262d99b3688e20aac2a14fd10b75c518583e875c1b9fe3d1f937795e0854
+  languageName: node
+  linkType: hard
+
 "parse-json@npm:^5.0.0":
   version: 5.2.0
   resolution: "parse-json@npm:5.2.0"
@@ -9684,6 +9844,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prismjs@npm:^1.27.0":
+  version: 1.29.0
+  resolution: "prismjs@npm:1.29.0"
+  checksum: d906c4c4d01b446db549b4f57f72d5d7e6ccaca04ecc670fb85cea4d4b1acc1283e945a9cbc3d81819084a699b382f970e02f9d1378e14af9808d366d9ed7ec6
+  languageName: node
+  linkType: hard
+
+"prismjs@npm:~1.27.0":
+  version: 1.27.0
+  resolution: "prismjs@npm:1.27.0"
+  checksum: 841cbf53e837a42df9155c5ce1be52c4a0a8967ac916b52a27d066181a3578186c634e52d06d0547fb62b65c486b99b95f826dd54966619f9721b884f486b498
+  languageName: node
+  linkType: hard
+
 "proc-log@npm:^3.0.0":
   version: 3.0.0
   resolution: "proc-log@npm:3.0.0"
@@ -9735,6 +9909,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"property-information@npm:^5.0.0":
+  version: 5.6.0
+  resolution: "property-information@npm:5.6.0"
+  dependencies:
+    xtend: "npm:^4.0.0"
+  checksum: d54b77c31dc13bb6819559080b2c67d37d94be7dc271f404f139a16a57aa96fcc0b3ad806d4a5baef9e031744853e4afe3df2e37275aacb1f78079bbb652c5af
+  languageName: node
+  linkType: hard
+
 "proxy-agent@npm:~6.3.0":
   version: 6.3.1
   resolution: "proxy-agent@npm:6.3.1"
@@ -9946,6 +10129,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-syntax-highlighter@npm:15.5.0":
+  version: 15.5.0
+  resolution: "react-syntax-highlighter@npm:15.5.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.3.1"
+    highlight.js: "npm:^10.4.1"
+    lowlight: "npm:^1.17.0"
+    prismjs: "npm:^1.27.0"
+    refractor: "npm:^3.6.0"
+  peerDependencies:
+    react: ">= 0.14.0"
+  checksum: 2bf57a1ea151f688efc7eba355677577c9bb55f05f9df7ef86627aae42f63f505486cddf3f4a628aecc51ec75e89beb9533201570d03201c4bf7d69d61d2545d
+  languageName: node
+  linkType: hard
+
 "react@npm:18.2.0":
   version: 18.2.0
   resolution: "react@npm:18.2.0"
@@ -10030,6 +10228,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"refractor@npm:^3.6.0":
+  version: 3.6.0
+  resolution: "refractor@npm:3.6.0"
+  dependencies:
+    hastscript: "npm:^6.0.0"
+    parse-entities: "npm:^2.0.0"
+    prismjs: "npm:~1.27.0"
+  checksum: 63ab62393c8c2fd7108c2ea1eff721c0ad2a1a6eee60fdd1b47f4bb25cf298667dc97d041405b3e718b0817da12b37a86ed07ebee5bd2ca6405611f1bae456db
+  languageName: node
+  linkType: hard
+
 "regenerate-unicode-properties@npm:^10.1.0":
   version: 10.1.1
   resolution: "regenerate-unicode-properties@npm:10.1.1"
@@ -10800,6 +11009,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"space-separated-tokens@npm:^1.0.0":
+  version: 1.1.5
+  resolution: "space-separated-tokens@npm:1.1.5"
+  checksum: 3ee0a6905f89e1ffdfe474124b1ade9fe97276a377a0b01350bc079b6ec566eb5b219e26064cc5b7f3899c05bde51ffbc9154290b96eaf82916a1e2c2c13ead9
+  languageName: node
+  linkType: hard
+
 "spdx-correct@npm:^3.0.0":
   version: 3.2.0
   resolution: "spdx-correct@npm:3.2.0"
@@ -11292,6 +11508,7 @@ __metadata:
     "@types/micromatch": "npm:4.0.6"
     "@types/node": "npm:20.11.0"
     "@types/react-dom": "npm:18.2.18"
+    "@types/react-syntax-highlighter": "npm:^15"
     "@typescript-eslint/eslint-plugin": "npm:6.18.1"
     "@typescript-eslint/parser": "npm:6.18.1"
     "@willbooster/eslint-config-next": "npm:1.1.0"
@@ -11324,6 +11541,7 @@ __metadata:
     react: "npm:18.2.0"
     react-dom: "npm:18.2.0"
     react-icons: "npm:5.0.1"
+    react-syntax-highlighter: "npm:15.5.0"
     sort-package-json: "npm:2.6.0"
     supertokens-auth-react: "npm:0.36.1"
     supertokens-node: "npm:16.7.1"
@@ -12078,6 +12296,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"xtend@npm:^4.0.0":
+  version: 4.0.2
+  resolution: "xtend@npm:4.0.2"
+  checksum: 366ae4783eec6100f8a02dff02ac907bf29f9a00b82ac0264b4d8b832ead18306797e283cf19de776538babfdcb2101375ec5646b59f08c52128ac4ab812ed0e
+  languageName: node
+  linkType: hard
+
 "y18n@npm:^5.0.5":
   version: 5.0.8
   resolution: "y18n@npm:5.0.8"