一般写博客都采用md格式，快捷方便，但是写好之后为了方便查看，我们需要将md格式的代码解析。

markdown-it

本示例中采用的是markdown-it来解析md格式的代码。

highlight.js

本示例中采用的是highlight.js来进行代码高亮显示。

但是highlight.js不支持行号，这会导致代码看起来不方便，本示例结合给博客的highlight.js添加行号和行号高亮中的方法来给代码添加行号。

const MarkdownIt = require('markdown-it')
const hljs = require('highlight.js')
const md = new MarkdownIt({html: true,linkify: true,typographer: true,highlight: function (str, lang) {// 此处判断是否有添加代码语言if (lang && hljs.getLanguage(lang)) {try {// 得到经过highlight.js之后的html代码const preCode = hljs.highlight(lang, str, true).value// 以换行进行分割const lines = preCode.split(/\n/).slice(0, -1)// 添加自定义行号let html = lines.map((item, index) => {return '
+ (index + 1) + '">' + item + '
'}).join('')html = '
' + html + '
'// 添加代码语言if (lines.length) {html += '' + lang + ''}return '
' +html +'
'} catch (__) {}}// 未添加代码语言，此处与上面同理const preCode = md.utils.escapeHtml(str)const lines = preCode.split(/\n/).slice(0, -1)let html = lines.map((item, index) => {return '
+ (index + 1) + '">' + item + '
'}).join('')html = '
' + html + '
'return '
' +html +'
'}
})// req.body.content 代表md代码
let articleContentHtml = md.render(`@[toc]${req.body.content}`)

在vue中的渲染

<template><div class="article-content" v-html="info.articleContentHtml">div>
template><script>
// 引入默认样式
import 'highlight.js/scss/default.scss'
// 引入个性化的vs2015样式
import 'highlight.js/styles/vs2015.css'
script><style lang="scss">
// 添加行号样式
pre.hljs {padding: 8px 2px;border-radius: 5px;position: relative;ol {list-style: decimal;margin: 0;margin-left: 40px;padding: 0;li {list-style: decimal-leading-zero;position: relative;padding-left: 10px;.line-num {position: absolute;left: -40px;top: 0;width: 40px;height: 100%;border-right: 1px solid rgba(0, 0, 0, .66);}}}b.name {position: absolute;top: 2px;right: 12px;z-index: 10;color: #999;pointer-events: none;}
}
style>

渲染之后的样式如下：

在代码中更详细的使用可查看vue-blog 和 vue-blog-express。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！