vue-hljs-with-line-number

Vue.js syntax highlighting made easy, using highlight.js.

Quickstart

Installation

Simply install the npm package vue-hljs-with-line-number:

npm install --save vue-hljs-with-line-number

Using vue-highlightjs

In your main JavaScript file (eg. main.js):

// Import Vue and vue-highlgihtjs
import Vue from 'vue'
import VueHljs from 'vue-highlightjs'
import 'vue-hljs-with-line-number/line-number.css';
 
// Tell Vue.js to use vue-hljs-with-line-number
Vue.use(VueHljs)

In your template, in order to highlight javascript code:

<!-- If your source-code lives in a variable called 'sourcecode' -->
<pre v-hljs="sourcecode">
    <code class="javascript"></code>
</pre>
 
<!-- If you want to highlight hardcoded source-code -->
<pre v-hljs>
    <code class="javascript">
    const s = new Date().toString()
    </code>
</pre>

---

About

Author: Chris Hager [e-mail] (https://www.metachris.com)

License: MIT

Contributors:

• Chris Hager
• mr-krille
• Duoc Nguyen
• Shu Ding
• Hancel Lin

Changelog

v1.0.7

• Fix the problem that code block has <span></span>.

v1.0.6

• Fix the problem that code block and line number alternately appear.

v1.0.5

• Fixed issue that options spell error.

v1.0.4

• Fixed issue that single line options spell error.

v1.0.3

• Fixed issue that single line rendering abnormal.

v1.0.2

• Fixed issue that single line has not line number.

v1.0.1

• Fixed lost line number when compnoent updated.

v1.0.0

• Since the original author is no longer updating, it needs to fork the warehouse to open another npm package. Add the line-number feature. Line-number feature reference warehouse highlightjs-line-numbers.js Extract and modify part of the code for Vue-compatible processing.