Miss any of our Open RFC calls?Watch the recordings here! »

vue-hljs-with-line-number

1.0.7 • Public • Published

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.

Install

npm i vue-hljs-with-line-number

DownloadsWeekly Downloads

3

Version

1.0.7

License

MIT

Unpacked Size

13.7 kB

Total Files

9

Last publish

Collaborators

  • avatar