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

ice_bear221

已于 2023-06-24 13:16:03 修改

阅读量557

点赞数

分类专栏：前端文章标签： javascript 前端 vue.js css

于 2023-06-13 10:51:45 首次发布

本文链接：https://blog.youkuaiyun.com/ice_bear221/article/details/131183465

版权

前端专栏收录该内容

6 篇文章

订阅专栏

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()
    })
  }