chore: Message 機能で Markdown の描画に対応させる

package.json

@@ -34,6 +34,8 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.45.4",
+    "react-markdown": "^9.0.1",
+    "remark-gfm": "^4.0.0",
     "swr": "^2.2.5",
     "ts-pattern": "^5.0.6",
     "zod": "^3.22.3"

src/app/(authed)/admin/answer/[answerId]/messages/_components/Messages.tsx

@@ -18,6 +18,8 @@ import { errorResponseSchema } from '@/app/api/_schemas/ResponseSchemas';
 import { formatString } from '@/generic/DateFormatter';
 import type { ErrorResponse } from '@/app/api/_schemas/ResponseSchemas';
 import type { Either } from 'fp-ts/lib/Either';
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 
 type Message = {
   id: string;
@@ -181,9 +183,11 @@ const Message = (props: {
             }}
           />
         ) : (
-          <Typography sx={{ whiteSpace: 'pre-wrap' }}>
-            {props.message.body}
-          </Typography>
+          <Box sx={{ whiteSpace: 'pre-wrap' }}>
+            <Markdown remarkPlugins={[remarkGfm]}>
+              {props.message.body}
+            </Markdown>
+          </Box>
         )}
       </Grid>
       {operationResultMessage === undefined ? null : (

src/app/globals.css

@@ -95,6 +95,30 @@ body {
     rgb(var(--background-start-rgb));
 }
 
+code {
+  background-color: #343434;
+  padding: 0.1em 0.3em;
+}
+
+div:has(> blockquote) {
+  border-left: 0.3em solid #343434;
+  margin: 10px auto;
+  padding: 15px;
+  border-radius: 5px;
+}
+
+blockquote p::before {
+  content: '\201C';
+}
+
+blockquote p::after {
+  content: '\201D';
+}
+
+blockquote + p {
+  text-align: right;
+}
+
 @media (prefers-color-scheme: dark) {
   html {
     color-scheme: dark;