#自定义配置

本页列出 Solid 组件 Fluxdown 的公开属性。除 text 外，顶层属性均可省略；FluxdownRaw 还需要显式传入 plugins。Full、Lite 和 Raw 的其他字段一致。

BaseBuildConfig、StreamingConfig、SmoothConfig、EffectItem、Theme 和 FluxdownRef 从 @fluxdown/solid 导入；IPluginItem 从 @fluxdown/solid-plugins/typings 导入。

在 JSX 中读取 props.text 或 text()，组件会跟随属性和 signal 更新。需要拆分或设置默认属性时，使用 Solid 的 splitProps、mergeProps，保留响应式访问。

#text 必选

类型： string

当前完整的 Markdown。收到新片段时，传入累积后的内容；不要只传最后一个片段。

<Fluxdown text="# 你好，Fluxdown" />

#streaming 可选

类型： boolean | StreamingConfig

默认值： false

true 开启末尾语法修复、平滑输出和默认 scale 动画，false 关闭流式行为。传对象可以分别控制各项：

<Fluxdown
  text={text()}
  streaming={{
    repairEnding: true,
    smooth: true,
    effect: 'scale',
  }}
/>

连接数据源与结束流的完整过程见流式内容。

#streaming.repairEnding 可选

类型： boolean

默认值： true（streaming 为对象时）

修复仍在生成的末尾语法。设置为 false 时，只关闭末尾修复；build.repair: false 则关闭全部修复。

#streaming.smooth 可选

类型： boolean | SmoothConfig

默认值： true（streaming 为对象时）

让新增内容逐步显示。true 使用内置弹簧调度，并自动选择可用的时钟；false 直接显示已收到的内容。传对象可以指定时钟和调度方式：

<Fluxdown
  text={text()}
  streaming={{
    smooth: {
      enabled: true,
      ticker: 'raf',
      scheduler: 'spring',
    },
  }}
/>

#smooth.enabled 可选

类型： boolean

默认值： false

使用 smooth 对象时，显式设为 true 开启平滑输出。关闭后会立即显示当前已收到的内容。

#smooth.ticker 必选

类型： 'raf' | 'interval' | SmoothTickerClass

选择输出节奏的时钟：'raf' 跟随动画帧，'interval' 使用定时器，也可以传自定义时钟类。

#smooth.scheduler 必选

类型： 'spring' | SmoothSchedulerClass

决定每次更新显示多少内容。'spring' 使用内置弹簧调度，也可以传自定义调度类。

通常直接使用 smooth: true 即可。SmoothTickerClass 和 SmoothSchedulerClass 从 @fluxdown/core-plugins/plugins/mapper/smooth 导入。

#streaming.effect 可选

类型： boolean | EffectItem | EffectItem[]

默认值： 'scale'（启用流式输出时）

例如，同时使用逐字入场与末尾圆点：

<Fluxdown
  text={text()}
  streaming={{ effect: ['scale', ['suffix', { type: 'dot' }]] }}
/>

以下字段位于 [名称, 配置] 的配置对象中，均可省略。通过 streaming.effect 指定效果时，enabled 默认开启；disabled: true 会排除该插件，priority 控制 mapper 执行顺序。

#scale：逐字入场

字符保留原有排版占位，逐渐放大、变清晰。duration: 0 立即显示，blur: 0 关闭模糊。

#shad：末尾渐变

length 的小数部分会被舍去，负数按 0 处理。maskWidth: 0 隐藏遮罩。

#chunk：分块入场

配合 smooth: false，保留收到的文本片段并逐段淡入。修改时长只影响之后的新内容，已有分组继续播放。

<Fluxdown
  text={text()}
  streaming={{ smooth: false, effect: ['chunk', { duration: 300 }] }}
/>

#suffix：末尾标记

默认插槽显示 cursor 和 dot。其他字符串交给自定义 render 或 slot 处理，默认不显示。响应结束后关闭 streaming，或单独将 enabled 改为 false。

ScaleConfig、ShadConfig、ChunkConfig 和 SuffixConfig 分别从 @fluxdown/core-plugins/plugins/mapper/scale、shad、chunk、suffix 子路径导入。配置也接受 Core 的可读闭包；实时演示见动画效果。

#build 可选

类型： BaseBuildConfig

默认值： {}

选择 Markdown 编译能力。表格、任务列表、删除线、自动链接和普通换行默认可用，以下字段均可省略。

<Fluxdown text={text()} build={{ tex: true, footnote: true }} />

Markdown 内的 HTML 会经过标签检查与清理，默认允许 span、u、br、em 和 a。调整方式见 Rehype 插件。

#build.repair 可选

类型： boolean

默认值： true

是否启用语法修复。false 关闭整组修复；仅控制流式末尾时，使用 streaming.repairEnding。

#build.footnote 可选

类型： boolean

默认值： false

是否解析脚注语法，并生成引用与回跳链接。

#build.tex 可选

类型： boolean

默认值： false

是否解析行内与块级公式语法。Full 内置公式渲染；Lite 提供基础公式插槽，可以按需添加公式插件。

#build.indentedCode 可选

类型： boolean

默认值： false

是否解析缩进代码块语法。围栏代码块无需开启此项。

#build.setextHeading 可选

类型： boolean

默认值： false

是否解析用 === 或 --- 作下划线的标题语法。以 # 开头的标题不受影响。

#build.idPrefix 可选

类型： string

默认值： 自动生成

为脚注 ID 指定命名空间。通常无需设置；手动设置时，应为页面上的不同实例提供不同值，避免脚注链接指向其他内容。

#theme 可选

类型： Theme

默认值： 'light'

支持三种形式：

• 'light' 或 'dark'：使用内置主题。
• PartialThemeConfig：在浅色主题上覆盖需要的 token。
• ['light' | 'dark', PartialThemeConfig]：在指定主题上覆盖 token。

<Fluxdown
  text={text()}
  theme={[
    'dark',
    {
      tokens: {
        colors: { accent: '#82d8cf' },
        typography: { fontSans: 'Inter, sans-serif' },
      },
    },
  ]}
/>

tokens 的各组配置都支持局部覆盖：

PartialThemeConfig 和 ThemeTokens 从 @fluxdown/solid 导入。全部 token 字段与例子见样式指南。

#plugins 可选

类型： IPluginItem | IPluginItem[]

默认值： []（Full 和 Lite）

Full 和 Lite 合并预设与传入的插件。FluxdownRaw 的此参数必填，使用传入的完整列表。

各列表都可省略；列表项可以是插件本身，也可以是 [插件, 选项]。例如，关闭默认代码工具栏：

import { Fluxdown } from '@fluxdown/solid';
import { CodeHeaderSlotPlugin } from '@fluxdown/solid-plugins/plugins/code';

type ArticleProps = {
  text: string;
};

export function Article(props: ArticleProps) {
  return (
    <Fluxdown
      text={props.text}
      plugins={{
        slots: [CodeHeaderSlotPlugin],
        config: {
          'slot-code-header': { disabled: true },
        },
      }}
    />
  );
}

IPluginItem 和 PluginConfigs 从 @fluxdown/solid-plugins/typings 导入。config 只作用于同一个对象里明确列出的插件，其他预设继续保留。

disabled: true 停用插件；priority 数值越小越早执行。相同优先级下，后面的 render 先匹配，后面的 slot 通过 Raw 包裹前面的组件。声明与组合方式见使用与编写插件。

#patches 可选

类型： IPatchItem<JSX.Element>[]

默认值： []

用自己的 Solid 内容替换指定文本，或在某个位置插入内容。适合把提及、引用等文本变成可交互元素。

IPatchItem 从 @fluxdown/core 导入，JSX 从 solid-js 导入。

import type { IPatchItem } from '@fluxdown/core';
import type { JSX } from 'solid-js';

import { Fluxdown } from '@fluxdown/solid';

const patches: IPatchItem<JSX.Element>[] = [
  {
    key: 'person-ada',
    range: [3, 7],
    render: () => {
      return <a href="/people/ada">@Ada</a>;
    },
  },
];

export function Article() {
  return <Fluxdown text="欢迎，@Ada。" patches={patches} />;
}

在 render 中创建 JSX，让每个补丁实例拥有自己的组件与清理生命周期。

#patches[].key 可选

类型： string

默认值： undefined

补丁的稳定标识。

#patches[].range 必选

类型： number | [number, number]

单个数字表示在该位置插入内容；区间表示替换内容，包含起点、不包含终点。位置按原始字符串索引计算，区间需要落在同一个内容块内，避免跨段落或相互重叠。

#patches[].render 必选

类型： (text?: string) => JSX.Element

返回插入或替换的内容，也可以通过 text 读取被替换的文本。

#class 可选

类型： string

默认值： undefined

最外层容器的类名，会与组件自己的类名合并。

<Fluxdown class="conversation-message" text={text()} />

#classList 可选

类型： { [className: string]: boolean | undefined }

默认值： undefined

使用 Solid 的条件类名绑定：

<Fluxdown classList={{ compact: compact() }} text={text()} />

#style 可选

类型： JSX.CSSProperties | string

默认值： undefined

最外层容器的内联样式，支持字符串或 Solid 样式对象。对象键使用 CSS 属性名：

<Fluxdown
  style={{ 'max-width': '72ch', 'margin-inline': 'auto' }}
  text={text()}
/>

内容内部的排版优先使用 theme，组件与交互调整使用插件。id、aria-*、data-*、onClick 等其他 div 属性也会透传到最外层容器。

#ref 可选

类型： (core: FluxdownRef) => void

默认值： undefined

创建组件时调用回调，传入可读的 Core 句柄。它不是 DOM 元素；FluxdownRef 的类型为 IReadableClosure<unknown[]>，其中的数组是内部渲染块，不应当作 JSX 再次渲染。

import type { FluxdownRef } from '@fluxdown/solid';

import { Fluxdown } from '@fluxdown/solid';
import { onMount } from 'solid-js';

type ArticleProps = {
  text: string;
};

export function Article(props: ArticleProps) {
  let content: FluxdownRef | undefined;

  onMount(() => {
    console.log(content?.value.value.length);
  });

  return (
    <Fluxdown
      text={props.text}
      ref={(core) => {
        content = core;
      }}
    />
  );
}

FluxdownRef 从 @fluxdown/solid 导入；IReadableClosure 从 stative 导入。组件负责释放 Core，卸载后不要继续使用保存的句柄。回调不会在卸载时收到 null，普通展示无需使用 ref。