MarkdownRender 设计文档
Markdown 渲染组件(严格对齐 Semi markdownRender,用 unified 管线替代 MDX):remark-parse + 条件 remark-gfm + remark-rehype + 透传 remark/rehype 插件把 raw 编译成 hast,再由 Svelte 递归渲染。默认组件映射对齐 Semi 11 键(h1.tsx~h6.tsx/a.tsx/img.tsx/table.tsx/p.tsx/code.tsx 逐文件对应本库 h1.svelte~h6.svelte/a.svelte/img.svelte/table.svelte/p.svelte/code.svelte):h1-h6→Typography.Title(cd-markdown-render-component-header)、p→Typography.Paragraph(-component-p)、a→Typography.Text link、img→div.-component-image>Image+alt、table→Table、code→同一组件按 className 是否含 language-* 分流(有→CodeHighlight lineNumber,无→span.-simple-code,行内 code 与无语言围栏代码块共用该分支)。不覆盖 pre(Semi 无此键,围栏代码块最终 DOM 是原生 <pre> 包裹 CodeHighlight/span)。标题字号/行高/颜色由 Typography 承担(Semi 亦然),组件只补 Semi 定义的 margin/simpleCode/image 样式(21 token 镜像 Semi variables.scss)。支持 components 覆盖;默认剥离 raw HTML(对齐 Semi format=md,保留需自传 rehype-raw 自负 XSS)。不支持 md 正文里任意 JSX 表达式求值(Semi format=mdx 深度能力,Svelte 无 jsx-runtime,运行时模型硬不兼容)。
← API 文档使用建议
Markdown 渲染组件(严格对齐 Semi markdownRender,用 unified 管线替代 MDX):remark-parse + 条件 remark-gfm + remark-rehype + 透传 remark/rehype 插件把 raw 编译成 hast,再由 Svelte 递归渲染。默认组件映射对齐 Semi 11 键(h1.tsx~h6.tsx/a.tsx/img.tsx/table.tsx/p.tsx/code.tsx 逐文件对应本库 h1.svelte~h6.svelte/a.svelte/img.svelte/table.svelte/p.svelte/code.svelte):h1-h6→Typography.Title(cd-markdown-render-component-header)、p→Typography.Paragraph(-component-p)、a→Typography.Text link、img→div.-component-image>Image+alt、table→Table、code→同一组件按 className 是否含 language-* 分流(有→CodeHighlight lineNumber,无→span.-simple-code,行内 code 与无语言围栏代码块共用该分支)。不覆盖 pre(Semi 无此键,围栏代码块最终 DOM 是原生 <pre> 包裹 CodeHighlight/span)。标题字号/行高/颜色由 Typography 承担(Semi 亦然),组件只补 Semi 定义的 margin/simpleCode/image 样式(21 token 镜像 Semi variables.scss)。支持 components 覆盖;默认剥离 raw HTML(对齐 Semi format=md,保留需自传 rehype-raw 自负 XSS)。不支持 md 正文里任意 JSX 表达式求值(Semi format=mdx 深度能力,Svelte 无 jsx-runtime,运行时模型硬不兼容)。
Accessibility
- 渲染语义化 HTML(标题 / 列表 / 表格 / 链接等)保留原生可访问性;默认剥离 raw HTML 规避注入;图片 alt 由 Markdown 源码 `` 提供。
设计变量
该组件暂无专属设计变量。