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

@@ -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>