试试你自己的 Markdown。
在左侧编辑,在右侧即刻看到结果。
文字正在到来,阅读已经开始。
一个好答案,不必等到最后一个字才值得阅读。Fluxdown 接住分批送来的 Markdown,让它从第一句开始,就有清晰的结构和自然的节奏。
从片段,到完整表达
网络里的文字时快时慢:有时是一个词,有时是一整段。平滑输出把这些片段连在一起,末尾渐变让新内容轻轻出现。你可以专注阅读,而不是等待下一次跳动。
语言有自己的节奏。
工具应该帮助它表达,而不是打断它。
不同语言,同一种阅读体验
- 中文:让想法自然展开。
- English: Give good ideas room to unfold.
- 日本語:言葉とともに、考えが形になる。
- 한국어: 생각이 자연스럽게 이어집니다.
段落里可以有 重点、斜体、组合强调,也可以 划掉旧想法。提到配置时,用行内代码 streaming 标记就很清楚。
为真实内容准备好
| 内容 | 阅读体验 | 开启方式 |
|---|---|---|
| 代码 | 高亮与复制 | 默认 |
| 表格 | 对齐与比较 | 默认 |
| 任务列表 | 整理进度 | 默认 |
| 公式 | 表达数学关系 | 按需开启 |
一份小小的接入清单
- 安装 Fluxdown
- 传入已经收到的完整文本
- 打开流式模式
- 加入自己的视觉风格
可以先这样开始:
- 新建一条消息。
- 随着内容到达,更新它。
- 已有内容保持稳定。
- 新增内容继续展开。
- 完成后关闭流式模式。
几行代码,让内容动起来
tsx
import { Fluxdown } from 'fluxdown';
type MessageProps = {
text: string;
pending: boolean;
};
export const Message = ({ text, pending }: MessageProps) => (
<Fluxdown text={text} streaming={pending} />
);这背后是一套框架无关的 Core。使用现成的界面,也可以把同一份能力带进自己的渲染环境。
代码,也有不同的表达
python
# 把输入片段连成完整消息
def accumulate(chunks):
message = ""
for chunk in chunks:
message += chunk
yield messagejson
{ "renderer": "Fluxdown", "message": "你好,世界。" }熟悉的缩进代码块也能保留:
plaintext
const message = '从一个好想法开始。';
console.log(message);让思路继续展开
这是另一种一级标题写法:文字下面放一行等号。
留一点空间给细节
用短横线也能写二级标题。本示例开启了这两种标题和缩进代码块;你的应用可以按需开启。
让数学回到文字里
本示例也开启了公式。行内的 可以自然地出现在句子中,较长的表达则独立展示:
给文字一点额外的表情
少量 HTML 也可以融入文字:划出重点,或用 强调 放慢脚步。
继续阅读 Fluxdown 项目。这里使用默认允许的标签,输出仍会经过 HTML 清理。
链接与图片
阅读 Fluxdown 项目介绍,也可以使用引用式链接,把地址留到文末。
网址可以直接写:https://github.com/hexmora/fluxdown
邮箱也能写成链接:hello@example.com。
一些细小但有用的表达
想展示星号本身?写成 *这样*。
行尾的两个空格会带来明确的换行。
普通换行也会保留,让句子自然分行。
熟悉的字符同样可以使用:©、&、<Markdown>。
内容还在生长
从普通文字,到代码、公式和结构化内容,Fluxdown 让每一种表达都有合适的位置。
现在,把下一段好内容交给你的读者。