yss-project/rules/comp/markdown.md

---

category: aigc title: MarkdownPreview subtitle: 消息渲染组件

name: 'fm-markdown-preview'

MarkdownPreview 消息渲染组件

<fm-markdown-preview class="content-style" [content]="message?.content"></fm-markdown-preview>

依赖

• 项目src/styles.scss必须引用font-awesome

  // styles.scss
  @import '@fortawesome/fontawesome-free/css/all.min.css'; // 字体图标
  @import 'highlight.js/scss/monokai.scss'; // 代码高亮 - monokai主题
  
  

示例

渲染方法

• 普通渲染，将已经完整的Markdown文本加载渲染

  <fm-markdown-preview [content]="content"></fm-markdown-preview>
  

• 流式渲染，将流式加载的消息段落渲染

  • 加载过程，将[render]="false"，只渲染纯文本信息

  • 加载完成，将[render]默认为true，渲染完整的纯文本信息

    <!-- 聊天气泡 -->
    <div class="item-row bubble">
    <fm-markdown-preview *ngIf="!message?.complete" class="content-style" [content]="message?.content" [render]="false"></fm-markdown-preview>
    <fm-markdown-preview *ngIf="message?.complete" [content]="message?.content"></fm-markdown-preview>
    </div>