---
category: aigc
title: MarkdownPreview
subtitle: 消息渲染组件
name: 'fm-markdown-preview'
---

# MarkdownPreview 消息渲染组件

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


# 依赖
- 项目src/styles.scss必须引用font-awesome
``` scss
// styles.scss
@import '@fortawesome/fontawesome-free/css/all.min.css'; // 字体图标
@import 'highlight.js/scss/monokai.scss'; // 代码高亮 - monokai主题

```

# 示例
<example name="fmode-ng-fm-markdown-preview-test-markdown-preview-example" />

# 渲染方法
- 普通渲染，将已经完整的Markdown文本加载渲染
``` html
<fm-markdown-preview [content]="content"></fm-markdown-preview>
```

- 流式渲染，将流式加载的消息段落渲染
  - 加载过程，将[render]="false"，只渲染纯文本信息
  - 加载完成，将[render]默认为true，渲染完整的纯文本信息
``` html
<!-- 聊天气泡 -->
    <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>
```