From 7252456dd4ed56129c472a527b1a46e947a7e4c9 Mon Sep 17 00:00:00 2001
From: Suyono <suyono3484@gmail.com>
Date: Mon, 13 May 2024 18:24:06 +1000
Subject: [PATCH] wip: added html handler in markdown

---
 app/mark/page.tsx |  6 ++++--
 package.json      |  1 +
 pnpm-lock.yaml    | 12 ++++++++++++
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/app/mark/page.tsx b/app/mark/page.tsx
index 2910387..d19163d 100644
--- a/app/mark/page.tsx
+++ b/app/mark/page.tsx
@@ -1,7 +1,7 @@
 import { unified } from 'unified';
 import remarkGfm from 'remark-gfm';
 import remarkParse from 'remark-parse';
-import remarkRehype from 'remark-rehype';
+import remarkRehype, { Options as RemarkRehypeOptions } from 'remark-rehype';
 import rehypeSanitize from 'rehype-sanitize';
 import rehypeHighlight, { Options as RehypeHighlightOptions } from 'rehype-highlight';
 import rehypeReact, { Options as RehypeReactOptions } from 'rehype-react';
@@ -9,13 +9,15 @@ import { all } from 'lowlight';
 import { Fragment, jsx, jsxs } from 'react/jsx-runtime';
 import { MarkPostString } from '@/components/dummyPost';
 import { raleway, roboto, nunito } from "@/app/fonts";
+import rehypeRaw from "rehype-raw";
 
 export default async function Mark() {
     let content = await MarkPostString();
     let result = await unified()
         .use(remarkParse)
         .use(remarkGfm)
-        .use(remarkRehype)
+        .use(remarkRehype, { allowDangerousHtml: true } as RemarkRehypeOptions)
+        .use(rehypeRaw)
         .use(rehypeSanitize)
         .use(rehypeHighlight, {
             languages: all,
diff --git a/package.json b/package.json
index a1dd4b7..299da7b 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "react-remark": "^2.1.0",
     "redis": "^4.6.13",
     "rehype-highlight": "^7.0.0",
+    "rehype-raw": "^7.0.0",
     "rehype-react": "^8.0.0",
     "rehype-sanitize": "^6.0.0",
     "rehype-stringify": "^10.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 16820c0..eb09f72 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -56,6 +56,9 @@ importers:
       rehype-highlight:
         specifier: ^7.0.0
         version: 7.0.0
+      rehype-raw:
+        specifier: ^7.0.0
+        version: 7.0.0
       rehype-react:
         specifier: ^8.0.0
         version: 8.0.0
@@ -1867,6 +1870,9 @@ packages:
   rehype-highlight@7.0.0:
     resolution: {integrity: sha512-QtobgRgYoQaK6p1eSr2SD1i61f7bjF2kZHAQHxeCHAuJf7ZUDMvQ7owDq9YTkmar5m5TSUol+2D3bp3KfJf/oA==}
 
+  rehype-raw@7.0.0:
+    resolution: {integrity: sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==}
+
   rehype-react@6.2.1:
     resolution: {integrity: sha512-f9KIrjktvLvmbGc7si25HepocOg4z0MuNOtweigKzBcDjiGSTGhyz6VSgaV5K421Cq1O+z4/oxRJ5G9owo0KVg==}
 
@@ -4511,6 +4517,12 @@ snapshots:
       unist-util-visit: 5.0.0
       vfile: 6.0.1
 
+  rehype-raw@7.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-raw: 9.0.3
+      vfile: 6.0.1
+
   rehype-react@6.2.1:
     dependencies:
       '@mapbox/hast-util-table-cell-style': 0.2.1