From 4f1f181d54e0c77e1a28de85065009c14ed62f95 Mon Sep 17 00:00:00 2001
From: lc6464 <64722907+lc6464@users.noreply.github.com>
Date: Mon, 23 Mar 2026 16:40:35 +0800
Subject: [PATCH] feat(skills): enable rendering of Markdown with HTML in skill
 details using rehype-raw and rehype-sanitize

---
 web/frontend/src/components/skills/skills-page.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/web/frontend/src/components/skills/skills-page.tsx b/web/frontend/src/components/skills/skills-page.tsx
index 3b5c5acb4..d8eeb1d93 100644
--- a/web/frontend/src/components/skills/skills-page.tsx
+++ b/web/frontend/src/components/skills/skills-page.tsx
@@ -8,6 +8,8 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
 import { type ChangeEvent, useRef, useState } from "react"
 import { useTranslation } from "react-i18next"
 import ReactMarkdown from "react-markdown"
+import rehypeRaw from "rehype-raw"
+import rehypeSanitize from "rehype-sanitize"
 import remarkGfm from "remark-gfm"
 import { toast } from "sonner"
 
@@ -260,7 +262,10 @@ export function SkillsPage() {
             ) : selectedSkillDetail ? (
               <div className="space-y-5">
                 <div className="prose prose-sm dark:prose-invert prose-pre:rounded-lg prose-pre:border prose-pre:bg-zinc-950 prose-pre:p-3 max-w-none">
-                  <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                  <ReactMarkdown
+                    remarkPlugins={[remarkGfm]}
+                    rehypePlugins={[rehypeRaw, rehypeSanitize]}
+                  >
                     {selectedSkillDetail.content}
                   </ReactMarkdown>
                 </div>