使用marked.js實作打字效果，實時渲染markdown文檔踩坑。
1、代碼塊沒有背景。
因生成的HTML代碼中，<pre>元素沒有加hljs這個class，修改為<pre class="hljs">即可。
2、當html代碼與高亮代碼一起渲染時，顯示混亂。
舉例：
**圓形**：将元素的圓角半徑設定為該元素尺寸的一半，即可将其變為圓形。
```css
.demo-css-radius-eg1 {
width: 100px;
height: 100px;
border-radius: 50%;
border: 1px solid green;
}
```
<style type="text/css">
.demo-css-radius-eg1 {
width: 100px;
height: 100px;
border-radius: 50%;
border: 1px solid green;
}
</style>
<div class="demo-css-radius-eg1"></div>
可以在以上 高亮代碼 與 html代碼 之間添加 --- 作分割。
```css
.demo-css-radius-eg1 {
width: 100px;
height: 100px;
border-radius: 50%;
border: 1px solid green;
}
```
---
<style type="text/css">
.demo-css-radius-eg1 {
width: 100px;
height: 100px;
border-radius: 50%;
border: 1px solid green;
}
</style>
<div class="demo-css-radius-eg1"></div>
3、當文檔内容過長時，渲染卡頓，打字效果未展現。
如果渲染速度過快，确實會造成卡頓的問題。
處理方式同樣可以采用第2點的方式添加 --- 作分割。
同時前後端優化代碼，作出分段顯示。
前端：
if(/^\s*---/.test(event.data)){
// 遇到 --- 時，在消息氣泡下，重新添加一個消息内容子產品
initChatMessageBubble();
// 後續内容分段渲染
texts = [];
return;
}
let currentMarkDownHtml = marked.parse(texts.join(''));
/** 其它代碼 **/
output.innerHTML = currentMarkDownHtml;
後端：
| --- | ----------------- |
前端處理後，後端需要針對表格分割線單獨處理下。
也就是如果遇到分割線這行内容時，就直接傳回。
當然，這隻是其中一種方式。
優化接口的傳回資料結構，應該是最科學的。
