MarkdownRender
Markdown 渲染组件：unified 管线（remark-parse + 条件 remark-gfm + remark-rehype + 透传 remark/rehype 插件）把 raw 编译成 hast，再由 Svelte 递归渲染成组件 / 原生标签。支持 components 覆盖元素与注册自定义标签对应的 Svelte 组件；默认剥离 raw HTML（对齐 Semi format=md，保留 HTML 需自传 rehype-raw 并自负 XSS）；代码块默认交给 CodeHighlight（存在则用，否则降级纯 <pre><code>）。不支持 md 正文里任意 JSX 表达式求值（Semi format=mdx 深度能力，Svelte 无 JSX runtime）。
如何引入
import { MarkdownRender } from '@chenzy-design/svelte';基础用法
传入 raw 纯文本，渲染标题、加粗、列表、链接、引用等基础 Markdown。
GFM 扩展
开启 remarkGfm 后支持表格、任务列表、删除线、自动链接。
代码块
代码块默认接入 CodeHighlight 做语法高亮。
API 参考
MarkdownRender
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
raw | Markdown 源码 | string | '' |
components | 元素覆盖 / 自定义标签注册；浅合并覆盖 defaultComponents（值为 string 时别名到另一原生标签） | Record<string, Component | string> | undefined |
format | 仅支持 md（unified 管线）；mdx 不支持（Svelte 无 JSX runtime） | 'md' | 'md' |
remarkGfm | 启用 GitHub Flavored Markdown（表格 / 任务列表 / 删除线 / 自动链接） | boolean | true |
remarkPlugins | 透传 remark 插件（mdast 阶段），支持 plugin 或 [plugin, options] 元组 | UnifiedPluginEntry[] | undefined |
rehypePlugins | 透传 rehype 插件（hast 阶段）；传 rehype-raw 可保留 raw HTML（自负 XSS） | UnifiedPluginEntry[] | undefined |
class | 根容器附加类名 | string | '' |
style | 根容器内联样式 | string | undefined |
Accessibility
- 渲染语义化 HTML（标题 / 列表 / 表格 / 链接等）保留原生可访问性；外链自动补 rel=noopener noreferrer + target=_blank；默认剥离 raw HTML 规避注入；图片 alt 由 Markdown 源码 `` 提供。
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-markdown-render-code-bg | var(--cd-color-fill-1) | 行内 code 背景色 |
--cd-markdown-render-code-color | var(--cd-color-text-0) | 行内 code 文本颜色 |
--cd-markdown-render-heading-color | var(--cd-color-text-0) | 各级标题颜色 |
--cd-markdown-render-hr-color | var(--cd-color-border) | hr 分隔线颜色 |
--cd-markdown-render-link-color | var(--cd-color-link) | 链接文本颜色 |
--cd-markdown-render-link-hover-color | var(--cd-color-link-hover) | 链接悬浮态颜色 |
--cd-markdown-render-pre-bg | var(--cd-color-fill-0) | 代码块（pre 降级态）背景 |
--cd-markdown-render-quote-border-color | var(--cd-color-border) | blockquote 左侧强调边框颜色 |
--cd-markdown-render-quote-color | var(--cd-color-text-2) | blockquote 文本颜色 |
--cd-markdown-render-table-border-color | var(--cd-color-border) | 表格单元格 / 边框颜色 |