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

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

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

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

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

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

3. 同样在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(let i=1;i < rowCount;i++){
      // 创建li标签元素
      let li = document.createElement("li");
      let text = document.createTextNode(i);
      // 将生成的行号添加到li标签中
      li.appendChild(text);
      // 将li标签添加到ol标签中
      ol.appendChild(li);
    }
    // 为ol标签添加class名
    ol.className = 'pre-numbering';
    block.parentNode.appendChild(ol);

    hljs.highlightBlock(block)
})

4. 在vue组件中，只需使用 v-highlight 指令即可。

<template>
    <div class="article">
        <!-- vue展示markdown内容,v-highlight自定义指令 -->
        <<div v-highlight v-html="article" class="markdown-body" id="content"></div>
    </div>
</template>

注意：添加 markdown-body 类名

5. 解析markdown转换为html

<script>
    // 将marked 引入
    import { marked }from 'marked';
    // 引入代码高亮样式
    import "highlight.js/styles/darcula.css";
 
    export default {
        name: "article",
        data() {
            return {
                article: '```\n' +
                    '<p>显示代码高亮</p>\n' +
                    '<p>显示代码行号</p>\n' +
                    '```'
            };
        },
        mounted() {
        	// 调用marked()方法，将markdown转换成html
            this.article= marked(this.article); 
        }
    }
</script>

6. 添加样式

 .article {
   width: 1200px;
   margin: 30px auto;
   overflow: hidden;
 }

 /* markdown 行号的样式 */
 #content li {
 	list-style: decimal;
 }

 .article-con div pre {
 	position: relative;
 	padding: 0 29px;
 	overflow: hidden;
 	font-size: 90%;
 	line-height: 1.9;
 	background: #282c34;
 }

 .article-con div pre code {
 	padding: 0.4em;
 }

 .article-con div .pre-numbering {
 	position: absolute;
 	top: 0;
 	left: 0;
 	width: 29px;
 	padding: 9px 7px 12px 0;
 	border-right: 1px solid #C3CCD0;
 	background: #282c34;
 	text-align: right;
 	font-size: 16px;
 	line-height: 1.45;
 }

 .pre-numbering li{
 	list-style:none;
 	font-family: Menlo, monospace;
 	color: #abb2bf;
 }

注意：如果没有引入highlight.js对应的css样式，则不会有代码高亮显示的效果。highlight.js有多种css样式， highlight.js对应的css样式在–node_modules–>highlight.js–>styles 目录下，可以选择自己喜欢的样式引入。