自定义扩展

MarkdownRenderer 提供多层扩展点：HTML 属性、代码渲染、操作按钮、插件、自定义渲染器。

customAttrs — 自定义 HTML 属性

给特定元素添加 class / style / data-* 等，支持对象或函数：

const customAttrs = {
  // 对象形式 — 静态属性合并
  h1: { class: 'my-heading', 'data-id': 'title' },
  table: { class: 'my-table' },

  // 函数形式 — 接收 (hastNode, combinedAttrs)，返回属性对象
  code: (node, attrs) => ({
    class: attrs.inline ? 'inline-code' : 'block-code',
    'data-lang': attrs.language,
  }),
}

<MarkdownRenderer :markdown="md" :custom-attrs="customAttrs" />

codeXRender — 自定义代码渲染器

按语言注册自定义代码块渲染，可覆盖默认 CodeBlock：

import { h } from 'vue'

const codeXRender = {
  // 自定义内联代码
  inline: (props) => h('span', { class: 'my-inline-code' }, props.raw.content),

  // 自定义特定语言渲染
  python: (props) => h(MyPythonRunner, { code: props.raw.content }),

  // 函数形式（接收完整 props，返回 VNode）
  javascript: (props) => h('div', evaluateJS(props.raw.content)),
}

codeBlockActions — 代码块操作按钮

import type { CodeBlockAction } from '@flowporr/x-markdown-vue'

const codeBlockActions: CodeBlockAction[] = [
  { label: '运行', icon: PlayIcon, onClick: (code) => runCode(code) },
]

remark / rehype 插件

import remarkEmoji from 'remark-emoji'

<MarkdownRenderer :markdown="md" :remark-plugins-ahead="[remarkEmoji]" />
<MarkdownRenderer :markdown="md" :remark-plugins="[myRemarkPlugin]" />

Ahead 在默认插件之前，非 Ahead 在默认插件之后。

自定义渲染器（核心引擎）

用 createProcessor + render 构建完全自定义的渲染器：

import { createProcessor, render } from '@flowporr/x-markdown-vue'
import { defineComponent } from 'vue'

export default defineComponent({
  props: { markdown: String },
  setup(props) {
    const processor = createProcessor({
      prePlugins: [/* 自定义 remark 插件 */],
      rehypePlugins: [/* 自定义 rehype 插件 */],
    })
    return () => {
      const mdast = processor.parse(props.markdown)
      const hast = processor.runSync(mdast)
      return render(hast, { class: 'my-md' })
    }
  },
})

主题

组件样式走 --js-* 设计 token，暗色模式用 [data-theme-mode='dark'] 选择器：

/* 覆盖代码块背景 */
[data-theme-mode='dark'] .x-md-code-block {
  background: var(--js-surface);
}

组件区域	使用的 Token
代码块背景	var(--js-surface) / var(--js-surface-hover)
代码块边框	var(--js-border) / var(--js-border-light)
文字	var(--js-text) / --js-text-secondary / --js-text-muted
圆角	var(--js-radius-sm) / --js-radius-md
阴影	var(--js-shadow-sm) / --js-shadow-md