我把上面的点整合成一个 Vue 单文件组件，你直接拷到项目里就Neng用：

说实话，这个组件一开始挺简单的，就是用 Showdown 渲染 Markdown，然后用 KaTeX 处理公式。

msgInfo = msgInfo.replaceAll;

Ru果你数据库里还有 <br><br/> 等各种变体，Ke以写个正则一把抓：

一个前端小白的踩坑日记，帮你避开那些“根号变触手”的诡异场面

npm install showdown npm install showdown-katex

装起来也就两行命令的事儿：

<template> <div class="msg" v-html="transformMsg"></div> </template> <script> import showdown from "showdown"; import showdownKatex from "showdown-katex"; export default { data { return { } }, methods: { transformMsg { // 第一步：预处理脏数据 msgInfo = msgInfo.replaceAll; // 第二步：创建 showdown 转换器，配置好插件 let converter = new showdown.Converter({ tables: true, // 支持表格 strikethrough: true, // 支持 ~~删除线~~ underline: true, // 防止下划线被误解析为斜体 extensions: , }), ], }); // 第三步：转成 HTML 并返回 return converter.makeHtml; } } } </script> 那些让人抓狂的 bug 们

kan着挺简单对吧？我当时也是这么想的，直到我遇到了那个“根号怪”。

第一个让我破防的 bug：只要公式里有根号，页面上就会出现两个根号！第一个是正常的，第二个像个伸着长脖子的怪物，根号线无限拉长，里面的公式还重复显示。那场面简直像公式在分裂繁殖。

经过一番搜索，才知道这是 KaTeX 渲染机制导致的。KaTeX 为了兼顾屏幕阅读器，会同时生成两个 DOM 结构：一个用于正常显示，另一个Zuo辅助。在某些复杂公式下两个结构dou会在页面上渲染出来就造成了重影。

解决方法？简单粗暴，CSS 一刀切：

.katex-html { display: none; }

放心，这不会影响正常公式的显示，屏幕阅读器也Neng从 .katex 里读取内容。加完这句，根号立马老实了世界清净。

咱就是说Ru果你的 msgInfo 是个大长文本，每次geng新dou重新转换一遍，开销还是不小的。

改成计算属性缓存一下结果：

computed: { renderedHtml { return this.transformMsg; } }

模板里用 v-html="renderedHtml"，只有当 msgInfo 真正变化时才会重新转换。

我们的数据是老系统倒过来的，里面换行用的是 <br />。结果 showdown 转换后这些 <br /> 原样输出到了 HTML 里根本没变成换行。页面上一段话全挤在一起，像没分段的作文。

msgInfo = msgInfo.replace;

$E=mc^$