opencode/picoclaw
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(skills): enable rendering of Markdown with HTML in skill details using rehype-raw and rehype-sanitize

Browse source
This commit is contained in:
lc6464 2026-03-23 16:40:35 +08:00
parent 48cb6dd24f
commit 4f1f181d54
No known key found for this signature in database
GPG key ID: 53C61B42FEC71D6D
1 changed files with 6 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
web/frontend/src/components/skills/skills-page.tsx
View file

@ -8,6 +8,8 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
import { type ChangeEvent, useRef, useState } from "react" import { type ChangeEvent, useRef, useState } from "react"
import { useTranslation } from "react-i18next" import { useTranslation } from "react-i18next"
import ReactMarkdown from "react-markdown" import ReactMarkdown from "react-markdown"
import rehypeRaw from "rehype-raw"
import rehypeSanitize from "rehype-sanitize"
import remarkGfm from "remark-gfm" import remarkGfm from "remark-gfm"
import { toast } from "sonner" import { toast } from "sonner"
@ -260,7 +262,10 @@ export function SkillsPage() {
) : selectedSkillDetail ? ( ) : selectedSkillDetail ? (
<div className="space-y-5"> <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"> <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} {selectedSkillDetail.content}
</ReactMarkdown> </ReactMarkdown>
</div> </div>