Vue解析markdown，并将其展示到页面(代码高亮 + 显示代码行号)

「已注销」

已于 2023-02-15 22:01:32 修改

阅读量7.7k

点赞数 2

文章标签： vue.js javascript 前端

于 2022-03-16 10:36:45 首次发布

本文链接：https://blog.csdn.net/King__k/article/details/123475346

版权

本文介绍如何在Vue项目中解析Markdown并展示到页面，同时实现代码高亮和行号显示。首先，通过安装依赖并在main.js中引入highlight.js。接着，创建一个全局自定义指令`v-highlight`。在Vue组件中使用该指令，确保添加`markdown-body`类。数据解析后，记得在data中创建空字符串来接收内容，并根据需要调整行号样式。未引入highlight.js的CSS样式将无法实现代码高亮，可在其styles目录下选择并引入。

摘要由CSDN通过智能技术生成

Vue解析markdown，并将其展示到页面(代码高亮 + 显示代码行号)，具体步骤如下：

安装依赖
在vue项目下打开命令窗口，并输入以下命令：

// marked 用于将markdown转换成html
npm install -g marked

// 用于代码高亮显示
npm install highlight.js

// 代码行号显示插件
npm install highlightjs-line-numbers.js

在main.js文件中引入highlight.js

import hljs from 'highlight.js';
Vue.use(hljs);

同样在main.js文件中，创建一个自定义的全局指令

//封装成一个指令,highlight是指令的名称
Vue.directive('highlight', (el) => {
     
  let blocks = el.querySelectorAll('pre code')
  blocks.forEach((block) => {
     

	// 创建ol标签元素
	let ol = document.createElement("ol");

    // 2.根据换行符获取行数，根据获取的行数生成行号
    let rowCount = block.outerHTML.split('\n').length;
    for(