markdown-it代码块渲染、自定义行号、复制代码功能

╰半橙微兮° 2023-07-13 15:10 72阅读 0赞

之前写过一篇关于代码块渲染添加自定义行号的文章：[markdown-it和highlight.js的结合渲染代码，并添加自定义行号][markdown-it_highlight.js] 。

不过在之后的渲染使用过程中由于效果不是很好，所以重新改版，并借此机会添加复制代码功能。

本博客采用的后端是 node.js 框架 Express，在使用 markdown-it 渲染 md 文件的时候，选择在添加文章或者更新文章的时候由 md 生成 html。

# 代码块生成 #

# 前端 #

## 前端实现代码选中的功能： ##

import Clipboard from 'clipboard'
    
    export default { 
      ...
      data () { 
        return { 
          ...
          clipboard: ''
        }
      },
      mounted () { 
        this.$nextTick(() => { 
          this.clipboard = new Clipboard('.copy-btn')
          // 复制成功失败的提示
          this.clipboard.on('success', (e) => { 
            this.$message.success('复制成功')
          })
          this.clipboard.on('error', (e) => { 
            this.$message.error('复制成功失败')
          })
        })
      },
      ...
      destroyed () { 
        this.clipboard.destroy()
      }
    }

## 自定义行号 ##

pre.hljs {
      padding: 12px 2px 12px 40px !important;
      border-radius: 5px !important;
      position: relative;
      font-size: 14px !important;
      line-height: 22px !important;
      overflow: hidden !important;
      code {
        display: block !important;
        margin: 0 10px !important;
        overflow-x: auto !important;
      }
      .line-numbers-rows {
        position: absolute;
        pointer-events: none;
        top: 12px;
        bottom: 12px;
        left: 0;
        font-size: 100%;
        width: 40px;
        text-align: center;
        letter-spacing: -1px;
        border-right: 1px solid rgba(0, 0, 0, .66);
        user-select: none;
        counter-reset: linenumber;
        span {
          pointer-events: none;
          display: block;
          counter-increment: linenumber;
          &:before {
            content: counter(linenumber);
            color: #999;
            display: block;
            text-align: center;
          }
        }
      }
      b.name {
        position: absolute;
        top: 2px;
        right: 50px;
        z-index: 10;
        color: #999;
        pointer-events: none;
      }
      .copy-btn {
        position: absolute;
        top: 2px;
        right: 4px;
        z-index: 10;
        color: #333;
        cursor: pointer;
        background-color: #fff;
        border: 0;
        border-radius: 2px;
      }
    }

自定义行号主要使用的是CSS计数方面的知识，感兴趣可以查看 [css计数器][css] 。

[markdown-it_highlight.js]: https://www.fxss.work/vue-blog/detail/33
[css]: https://www.fxss.work/vue-blog/detail/63