【vue3优化】markdown-it -- markdown 转换成html

当我们的文本编辑区域经常需要支持markdown内容，那我们怎么办呢？

将markdown 转换成html： 库叫markdown-it
GitHub - markdown-it/markdown-it: Markdown parser, done right. 100% CommonMark support, extensions, syntax plugins & high speed

一、安装和使用介绍

1.首先下载markdown-it包

npm install markdown-it --save
// 除了本体，还要安装type文件
npm install --save-dev @types/markdown-it

2.导入

import MarkdownIt from 'markdown-it'

3.使用

const md = new MarkdownIt()
//假设需要转换的是下面的代码
const markdownText = ref('# 巧妹儿的标题!;```console.log("巧妹")```')
<div v-html="md.render(markdownText)"></div>

二、代码里应用markdown-it

import MarkdownIt from 'markdown-it'
// 1、新建实例md：
const md = new MarkdownIt()
// 2、然后就在md上调用render方法， 把markdown的格式转成html的格式
// 新增计算属性
    const currentHTML = computed(() => {
      // 先判断存不存在，因为一开始currentPost有可能是undefined，在没有拿回数据的时候。
      if (currentPost.value && currentPost.value.content) {
        return md.render(currentPost.value.content)
      } 
    })
    return {
      currentHTML
    }

展示在界面

<div>{{ currentHTML }}</div>

 现在有对应的html了，但是现在展示出来的是转义以后的字符串，我们需要直接展示HTML标签，而不希望它被转义。

Built-in Directives | Vue.js

v-html帮你直接更新元素的innerHTML,
这样就可以直接展示出HTML标签了，而不是页面上展示：

修改代码为：

<div v-html="currentHTML"></div>

三、代码持续优化

1、加上isHTML这个判断：

• 如果 isHTML 为 true（意味着 content 已经是 HTML 格式的字符串），则直接返回 content。
• 如果 isHTML 为 false 或者未定义，则使用 md.render(content) 将 content（预期是 Markdown 格式的字符串）转换成 HTML 格式的字符串，并返回转换后的结果。

2、确保计算属性有返回值

• return ''; // 添加这行代码，确保总是有返回值
• 这样一来，当 currentPost.value 或者 content 不存在时，currentHTML 将返回一个空字符串，从而遵守 Vue 的规则，即计算属性应该总是返回一个值。

    const currentHTML = computed(() => {
      const {content, isHTML} = currentPost.value
      if (currentPost.value && content) {
        return isHTML ? content : md.render(content)
      }
      return ''; 
    })