vue-hljs-with-line-number

Syntax highlighting with highlight.js for Vue.js 2.x

Usage no npm install needed!

<script type="module">
  import vueHljsWithLineNumber from 'https://cdn.skypack.dev/vue-hljs-with-line-number';
</script>

README

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 chris@linuxuser.at (https://www.metachris.com)

License: MIT

Contributors:

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.