Use remarkBreaks for newlines

times-yasunori · Oct 3, 2024 · c23afad · c23afad
1 parent 4027e70
commit c23afad
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 1 deletion.
diff --git a/packages/web/app/routes/_index/route.tsx b/packages/web/app/routes/_index/route.tsx
@@ -3,6 +3,7 @@ import type { MetaFunction } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
+import remarkBreaks from "remark-breaks";
 import { indexLoader, type IndexLoader } from "./loader";
 
 export const loader = indexLoader;
@@ -38,7 +39,9 @@ export default function Index() {
             </Group>
           </Stack>
           <Paper p="md">
-            <Markdown remarkPlugins={[remarkGfm]}>{d.content}</Markdown>
+            <Markdown remarkPlugins={[remarkBreaks, remarkGfm]}>
+              {d.content}
+            </Markdown>
           </Paper>
         </Card>
       ))}

diff --git a/packages/web/package.json b/packages/web/package.json
@@ -26,6 +26,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-markdown": "^9.0.1",
+    "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.0"
   },
   "devDependencies": {

diff --git a/packages/web/pnpm-lock.yaml b/packages/web/pnpm-lock.yaml