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]是代码特定行数高亮设置。

Logo

一站式 AI 云服务平台

更多推荐