Markdown预览 代码块自动化加代码行数-VSCode
Markdown预览 代码块自动化加代码行数-VSCode
·
Markdown预览 代码块自动化加代码行数-VSCode
[官方地址]https://shd101wyy.github.io/markdown-preview-enhanced/#/zh-cn/markdown-basics?id=代码行数
第一步
通过命令面板输入Markdown Preview Enhanced: Extend Parser
进入C:\Users\Admin.mume\parser.js文件,该文件是Markdown预览时的执行文件
module.exports = {
onWillParseMarkdown: function (markdown) {
return new Promise((resolve,reject) => {
// 给三四级标题添加Icon
markdown = markdown.replace(/^(###\s+)|(####\s+)/gm,($0) => {
if ($0 && $0.trim().length === 4) {
return $0 + "🅱️ "
}
return $0 + "🅰️ "
})
// 给代码块自动添加代码行数
markdown = markdown.replace(/^\`\`\`[^\t\v\r\f\n]+\s*/gm,(...rest) => {
let $0 = rest[0]
if ($0.includes('{')) {
let $1 = $0.replace(/^\`\`\`[^\t\v\r\f\n]+\s*\{.*(?=\})/gm,(...rest2) => {
let $0 = rest2[0]
if (!$0.includes('.line-numbers')) {
return $0 + ' .line-numbers '
}
return $0
})
return $1
} else {
return $0.trim() + ' { .line-numbers }\n'
}
})
return resolve(markdown)
})
},
onDidParseMarkdown: function (html,{ cheerio }) {
return new Promise((resolve,reject) => {
return resolve(html)
})
},
onWillTransformMarkdown: function (markdown) {
return new Promise((resolve,reject) => {
return resolve(markdown);
});
},
onDidTransformMarkdown: function (markdown) {
return new Promise((resolve,reject) => {
return resolve(markdown);
});
}
}
第二步
markdown文件中,测试代码块源码如下:
```js { highlight=[1-4,10] }
app.get('/',(req,resp,next)=>{
fs.readFile('./a.js',{encoding:'utf8'},(err,data)=>{
if(err){
next(err)
return
}
resp.end(data)
})
})
// 异步错误需要手动调用next()并传递Error对象。
渲染成
注意:highlight=[1-4,10]是代码特定行数高亮设置。
更多推荐




所有评论(0)