markdown中插入视频前台渲染出来导致<video>等标签被转义成字符-526互联

markdown中插入视频前台渲染出来导致<video>等标签被转义成字符解决办法：

如图：

在markdown里面插入视频，可以按照下面写法，哈哈，虽然很捞，但是还是可以满足的。

<video src="https://xxxxxxxxxxxxxx.mp4" controls="true"  style="max-width: 100%;height: auto;"></video>

前台打印出来是这样的：

可以看到，标签的< > 等已经被转义字符了。所以这就需要我们在前端获取的视频把这个字符还原的，使用到了：

HtmlDecode：把经过 HtmlEncode编码过的字符解码，还原成原始字符。

具体使用：

你可以使用npm命令来安装`he`库，具体步骤如下：

1. 打开终端或命令行工具，进入Vue项目的根目录。
2. 运行以下命令安装`he`库：

npm install he --save

这将会在你的Vue项目中安装`he`库，并将其保存到`package.json`文件的依赖项中。

3. 在需要使用`he`库的Vue组件或JavaScript文件中导入它：

import he from 'he';

4. 现在你就可以在Vue组件或JavaScript文件中使用`he`库提供的方法了。例如，你可以使用`he.decode`方法来进行HTML解码：

const htmlString = '&lt;p&gt;Hello, &lt;strong&gt;world&lt;/strong&gt;!&lt;/p&gt;';
const decodedString = he.decode(htmlString);
console.log(decodedString); // 输出: "<p>Hello, <strong>world</strong>!</p>"

5.markdown在vue页面的中具体使用如下：

import he from 'he';

export default {
  data() {
    return {
      article: {},
      articleContentHtml: ''
    }
  },
  methods: {
    htmlDecode(value) {
      // 自定义转义逻辑
      return he.decode(value);
    },
    fetchData() {
      // 假设这里是获取数据的异步请求
      // 在请求成功后执行以下代码
      if (!this.$common.isEmpty(res.data)) {
        this.article = res.data; //获取所有数据
        this.getNews();
        const md = new MarkdownIt({ breaks: true });
        this.articleContentHtml = md.render(this.article.articleContent);  //渲染文章的所有内容
        this.articleContentHtml = this.htmlDecode(this.articleContentHtml); // 使用HtmlDecode转义还原字符
      }
    }
  },
  created() {
    this.fetchData();
  }
}