Vue中使用editor.md（4）：使用prism.js进行代码高亮

0. 背景

使用prism.js对editor.md产生的代码片段进行高亮显示

1. 引入prism.js

1.1 下载

官网地址：https://prismjs.com/index.html

1.2 引入项目

2. 使用

2.1 配置prism

修改babel.config.js

module.exports = {
    
    
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'prismjs',
      {
    
    
        languages: ['javascript', 'css', 'markup', 'sql'],
        plugins: ['line-numbers', 'copy-to-clipboard'],
        theme: 'okaidia',
        css: true
      }
    ]
  ]
}

2.2 添加行号和复制

created () {
    
    
    this.$nextTick(() => {
    
    
      // 添加行号
      const preBlocks = document.querySelectorAll('pre')
      preBlocks.forEach(preBlock => {
    
    
        if (!preBlock.classList.contains('line-numbers')) {
    
    
          preBlock.classList.add('line-numbers')
        }
        // 设置复制提示
        preBlock.setAttribute('data-prismjs-copy', '复制')
        preBlock.setAttribute('data-prismjs-copy-success', '复制成功')
        preBlock.setAttribute('data-prismjs-copy-timeout', 1000)
        this.$iceLog.log(preBlock.dataset)
      })
      // 渲染完成后，高亮代码
      Prism.highlightAll()
    })
  }

3. 测试

x. 参考

1. HTML - 标签自定义属性
2. 使用 Prism.js 对代码进行语法高亮
3. Vue解析markdown，并将其展示到页面(代码高亮 + 显示代码行号)
4. 漂亮的代码语法高亮插件Prism.js简单使用文档
5. Prism & highlight.js高亮代码 & 手动添加行号 & 一键复制
6. vue中prismjs实现代码高亮展示行号