博客

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

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>
   

   这里为了方便展示，所以使用了字符串来进行解析，这跟从后端接口获取到的数据进行解析并将其展示到页面上是一样的！！！

   • 在data中创建一个空字符串

     data () {
         return {
           article: ''
         }
       }
     

   • 解析后端数据

     // marked 解析 markdown 转换成 html
       this.article = marked(res.data.content)
     

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 目录下，可以选择自己喜欢的样式引入。

   效果如图所示：