Cherry Markdown AI聊天集成：流式输入与实时渲染

2026-02-04 04:18:11作者：宣利权Counsellor

痛点：传统Markdown编辑器在AI场景的局限性

你是否遇到过这样的场景？当AI助手正在生成Markdown格式的回复时，传统的Markdown编辑器要么等待完整内容生成后才一次性渲染，要么在流式输出过程中出现语法不完整、渲染错乱的问题。这种体验严重影响了AI聊天应用的流畅性和用户交互体验。

Cherry Markdown专门为AI聊天场景设计了流式会话模式（Flow Session Context），完美解决了这些问题。通过本文，你将掌握：

🚀 流式会话的核心配置与工作原理
⚡ 10ms级实时渲染性能优化
🎯 智能语法自动补全机制
🔧 实际集成示例与最佳实践

流式会话模式的核心特性

性能大幅提升

// 传统模式渲染间隔：50ms
// 流式模式渲染间隔：10ms（提升5倍）
const cherryInstance = new Cherry({
  engine: {
    global: {
      flowSessionContext: true,  // 开启流式模式
      flowSessionCursor: 'default'  // 显示光标指示器
    }
  }
});

智能语法自动补全

Cherry Markdown在流式模式下具备智能语法修复能力：

语法类型	自动补全功能	应用场景
加粗/斜体	自动闭合`*`和``符号	AI输出中途断开的强调文本
代码块	自动补全``````闭合	流式输出代码时的语法完整性
表格	自动生成表格结构	动态表格数据的实时渲染
列表	智能识别列表项	逐项输出的列表内容

光标指示器可视化

flowchart TD
    A[AI开始流式输出] --> B{流式模式开启?}
    B -->|是| C[添加光标指示器<br>CHERRYFLOWSESSIONCURSOR]
    B -->|否| D[正常渲染模式]
    C --> E[实时渲染Markdown]
    E --> F[用户看到实时更新<br>+闪烁光标效果]
    D --> G[等待完整内容<br>50ms间隔渲染]

技术实现深度解析

引擎层优化

Cherry Markdown在引擎层面进行了专门优化：

// Engine.js 中的流式处理逻辑
$setFlowSessionCursorCache(md) {
  if (this.$cherry.options.engine.global.flowSessionContext) {
    // 智能光标位置判断
    if (/[*_~^]+\n*$/.test(md)) {
      return md.replace(/([*_~^]+\n*)$/, 'CHERRYFLOWSESSIONCURSOR$1');
    }
    // 特殊语法处理（代码块、表格等）
    if (/\n\s*`{1,}\s*\n*$/.test(md)) {
      return md.replace(/(\n\s*`{1,}\s*\n*)$/, 'CHERRYFLOWSESSIONCURSOR$1');
    }
    return `${md}CHERRYFLOWSESSIONCURSOR`;
  }
  return md;
}

渲染频率控制

// Cherry.js 中的渲染定时器优化
editText(_evt, codemirror) {
  if (this.timer) {
    clearTimeout(this.timer);
    this.timer = null;
  }
  // 流式模式：10ms间隔，普通模式：50ms间隔
  const interval = this.options.engine.global.flowSessionContext ? 10 : 50;
  this.timer = setTimeout(() => {
    // 渲染逻辑...
  }, interval);
}

实战：构建AI聊天Markdown渲染器

基础配置示例

<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/cherry-markdown/dist/cherry-markdown.css" rel="stylesheet">
</head>
<body>
  <div id="chat-container"></div>
  
  <script src="https://cdn.jsdelivr.net/npm/cherry-markdown/dist/cherry-markdown.js"></script>
  <script>
    // AI聊天场景专用配置
    const cherryConfig = {
      editor: {
        height: 'auto',
        defaultModel: 'previewOnly',  // 纯预览模式
      },
      engine: {
        global: {
          flowSessionContext: true,    // 开启流式模式
          flowSessionCursor: 'default' // 默认光标样式
        },
        syntax: {
          codeBlock: { selfClosing: false },
          header: { anchorStyle: 'none' },
          table: { selfClosing: false },
          fontEmphasis: { selfClosing: false }
        }
      },
      previewer: {
        enablePreviewerBubble: false,
      },
      isPreviewOnly: true,
    };

    let currentCherry = null;
    const messages = [];
  </script>
</body>
</html>

流式消息处理核心

class AIChatRenderer {
  constructor() {
    this.messages = [];
    this.currentIndex = 0;
    this.isPrinting = false;
  }

  // 添加AI消息到队列
  addMessage(content) {
    this.messages.push(content);
    this.renderNextMessage();
  }

  // 流式渲染消息
  async renderNextMessage() {
    if (this.isPrinting || this.currentIndex >= this.messages.length) {
      return;
    }

    this.isPrinting = true;
    const message = this.messages[this.currentIndex];
    
    // 创建消息DOM容器
    const msgElement = this.createMessageElement();
    
    // 初始化Cherry实例
    currentCherry = new Cherry({
      ...cherryConfig,
      el: msgElement.querySelector('.chat-content')
    });

    // 模拟流式输出
    await this.streamOutput(message, 0);
    
    this.currentIndex++;
    this.isPrinting = false;
    
    // 检查是否有后续消息
    if (this.currentIndex < this.messages.length) {
      this.renderNextMessage();
    }
  }

  // 流式输出实现
  async streamOutput(message, currentPos) {
    return new Promise((resolve) => {
      setTimeout(() => {
        const currentText = message.substring(0, currentPos);
        currentCherry.setMarkdown(currentText);
        
        if (currentPos < message.length) {
          this.streamOutput(message, currentPos + 1).then(resolve);
        } else {
          resolve();
        }
      }, 30); // 控制输出速度
    });
  }

  createMessageElement() {
    const template = `
      <div class="message">
        <div class="avatar">AI</div>
        <div class="chat-content"></div>
      </div>
    `;
    const container = document.getElementById('chat-container');
    container.insertAdjacentHTML('beforeend', template);
    return container.lastElementChild;
  }
}

完整集成示例

// 模拟AI接口返回的Markdown内容
const aiResponses = [
  `在流式输出的情况下，Cherry提供了**更快的渲染频率**（最快每10ms渲染一次）。相比普通模式的50ms，性能提升5倍！`,

  `支持智能语法补全：\n- **加粗文字**自动补全\n- *斜体文字*自动补全\n- 代码块自动闭合`,

  ````markdown
// 代码块示例
function streamRender(content) {
  let current = 0;
  const render = () => {
    if (current < content.length) {
      cherry.setMarkdown(content.substring(0, current));
      current++;
      setTimeout(render, 30);
    }
  };
  render();
}
````,

  `| 特性 | 流式模式 | 普通模式 |
|------|---------|---------|
| 渲染间隔 | 10ms | 50ms |
| 语法补全 | ✅ 支持 | ❌ 不支持 |
| 实时性 | ⭐⭐⭐⭐⭐ | ⭐⭐ |`
];

// 初始化聊天渲染器
const chatRenderer = new AIChatRenderer();

// 模拟AI消息流
let messageIndex = 0;
const addAIMessage = () => {
  if (messageIndex < aiResponses.length) {
    chatRenderer.addMessage(aiResponses[messageIndex]);
    messageIndex++;
    
    // 模拟AI思考时间
    if (messageIndex < aiResponses.length) {
      setTimeout(addAIMessage, 2000);
    }
  }
};

// 开始对话
addAIMessage();

高级配置与自定义

自定义光标样式

// 自定义光标指示器
const customCursorConfig = {
  engine: {
    global: {
      flowSessionContext: true,
      flowSessionCursor: `
        <span class="custom-cursor" 
              style="display:inline-block;
                     width:2px;
                     height:1em;
                     background:#007acc;
                     animation:blink 1s infinite;">
        </span>
        <style>
          @keyframes blink { 50% { opacity: 0; } }
        </style>
      `
    }
  }
};

性能优化建议

// 针对大量消息的优化策略
const optimizedConfig = {
  engine: {
    global: {
      flowSessionContext: true,
      // 禁用不需要的功能提升性能
      htmlWhiteList: '',
      htmlBlackList: '*'
    }
  },
  // 精简语法支持
  syntax: {
    mathBlock: false,    // 禁用数学公式
    mermaid: false,      // 禁用图表
    footnote: false      // 禁用脚注
  }
};