在Vue中将MarkDown转换成HTML显示,代码块高亮显示

在Vue中将MarkDown转换成HTML显示,代码块高亮显示，最近博主在写自己的项目时遇到了个问题就是，如果后端存储的markdown形式的文章内容怎么以HTML的形式展现到页面上，这就引入出了我们的marked。

marked highlight 安装

我这里用的npm
marked ：将MarkDown转换成HTML显示
highlight: 将代码块根据语言进行高亮显示

npm install marked --save
npm install highlight.js

安装中常见的error处理

在安装markdown的时候可能会出现安装失败的error，大致的错误信息中可能会有

node >= 18 的字样 这里就是表示要安装marked，你的node版本必须大于等于18，可以检查自己的node是否大于18，如果小于18，要更换到18以上的版本。

marked配置

导入marked

import { marked } from "marked";

配置marked的选项

marked.setOptions({
  renderer: new marked.Renderer(),
  gfm: true,
  pedantic: false,
  sanitize: false,
});

渲染markdown

data(){
     return{
            Article:"", //这里接收的后端传过来，未经过渲染的文章
            blog:"", // 这里用来接收经过marked渲染过的文章
     }
}

  methods: {
    async getArticalById(ArticleId) {
      const res = await Api.articleApi.getArticleById(ArticleId);
      console.log(res);
      this.Article = res.data;
      //关键在这里,我们将将文章通过marked方法进行渲染
      this.blog = marked(this.Article.content);
    },
  },

我们将要放置的内容的位置上加入 v-html 用vue进行html的解析,
其中的markdown-body是渲染后的样式，大家可以自己去设置自己的样式。

<div v-html="blog" class="markdown-body"></div>

这里我们去查看一下页面就发现我们的代码区域都有了，即便是在图床中的图片也出现了。证明我们的解析没有错误。

原数据库存储:

当前页展示

代码块高亮:

在我们的main.js中引入highlight：
hljs: 我们的highlight渲染
‘highlight.js/styles/atom-one-dark.css’ ：highlight的主题样式

import hljs from 'highlight.js';
import 'highlight.js/styles/atom-one-dark.css'

在new Vue()的上方添加

Vue.directive('highlight',function (el) {
  let blocks = el.querySelectorAll('pre code');
  blocks.forEach((block)=>{
    hljs.highlightBlock(block)    
  })
})

接着我们的highlight配置基本完毕，我们只需要添加v-highlight在我们的内容上即可

<div v-html="blog" class="markdown-body" v-highlight></div>

再次检查我们的页面会发现我们的代码区域已经变亮了

我们通过F12去检查我们的代码区域会发现它已经帮我们自动识别了语言的类型:

再换一种语言，也是一样。

到这里我们的基本配置也完成，成功的从MarkDown转换成HTML。