highlightjs-line-numbers2.js

Highlight.js line numbers plugin (highlightjs-line-numbers.js Modified version).

Npm

npm install highlightjs-line-numbers2.js

用法:

import Vue from 'vue'
import hljs from 'highlight.js';
import highlightjsLineNumbers from 'highlightjs-line-numbers2.js';
import 'highlight.js/styles/atom-one-dark.css' //样式文件,如：atom-one-dark|railscasts|monokai-sublime|zenburn

Vue.directive('highlight', function(el) {
  
  let blocks = el.querySelectorAll('pre code');
  
  hljs.initHighlightingOnLoad();
  
  highlightjsLineNumbers.init(hljs); //需要将 highlight.js 传入进行方法替换
  
  hljs.initLineNumbersOnLoad({singleLine: true});

  blocks.forEach((block) => {
    hljs.highlightBlock(block)
  })
  
})

<template>
  <div v-highlight>
     <pre>
        <code>
          <!--你要展示的代码-->
        </code>
    </pre>
  </div>
</template>

If your needs cool style, add styles by taste:

/* for block of numbers */
.hljs-ln-numbers {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    text-align: center;
    color: #ccc;
    border-right: 1px solid #CCC;
    vertical-align: top;
    padding-right: 5px!important;

    /* your custom style here */
}

/* for block of code */
.hljs-ln-code {
    padding-left: 10px!important;
}