├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── .travis.yml
├── README.md
├── index.js
├── package.json
└── test
    └── index.test.js


/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     "extends": "eslint-config-es5",
 3 |     "plugins": [
 4 |         "import"
 5 |     ],
 6 |     "rules": {
 7 |         "strict": [0, "global"],
 8 |         "no-var": "off"
 9 |     }
10 | };
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js: "6"
3 | install: npm install -d
4 | script:
5 |   - npm run lint
6 |   - npm test
7 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-highlightjs
 2 | 
 3 | **This project is superseded by the official Highlight.js Vue plugin:**
 4 | 
 5 | * https://github.com/highlightjs/vue-plugin
 6 | * https://www.npmjs.com/package/@highlightjs/vue-plugin
 7 | 
 8 | ---
 9 | 
10 | [Vue.js](https://vuejs.org/) syntax highlighting made easy, using [highlight.js](https://highlightjs.org/).
11 | 
12 | [![Build Status](https://travis-ci.org/metachris/vue-highlightjs.svg?branch=master)](https://travis-ci.org/metachris/vue-highlightjs)
13 | 
14 | ## Quickstart
15 | 
16 | ### Installation
17 | 
18 | Simply install the [npm package `vue-highlightjs`](https://www.npmjs.com/package/vue-highlightjs):
19 | 
20 |     npm install --save vue-highlightjs
21 | 
22 | ### Using vue-highlightjs
23 | 
24 | In your main JavaScript file (eg. `main.js`):
25 | 
26 | ```javascript
27 | // Import Vue and vue-highlgihtjs
28 | import Vue from 'vue'
29 | import VueHighlightJS from 'vue-highlightjs'
30 | import 'highlight.js/styles/default.css' // or other highlight.js theme
31 | 
32 | // Tell Vue.js to use vue-highlightjs
33 | Vue.use(VueHighlightJS)
34 | ```
35 | 
36 | In your template, in order to highlight javascript code:
37 | 
38 | ```html
39 | <!-- If your source-code lives in a variable called 'sourcecode' -->
40 | <pre v-highlightjs="sourcecode"><code class="javascript"></code></pre>
41 | 
42 | <!-- If you want to highlight hardcoded source-code -->
43 | <pre v-highlightjs><code class="javascript">const s = new Date().toString()</code></pre>
44 | ```
45 | ---
46 | 
47 | * You can see a live example here: https://www.python-boilerplate.com/
48 | * Fiddle with it: https://jsfiddle.net/metachris/1vz9oobc/
49 | * See also this blog post for more information: https://www.metachris.com/2017/02/vuejs-syntax-highlighting-with-highlightjs/
50 | 
51 | 
52 | ## Contributing
53 | 
54 | Any sort of contributions and feedback is much appreciated. Just
55 | leave an issue or pull-request!
56 | 
57 | This project uses the [AirBnB code style](https://github.com/airbnb/javascript).
58 | 
59 | Please run `npm run lint` and `npm run test` before you submit a pull request! <3
60 | 
61 | 
62 | ## About
63 | 
64 | Author: Chris Hager <chris@linuxuser.at> (https://www.metachris.com)
65 | 
66 | License: MIT
67 | 
68 | Contributors:
69 | 
70 | * [Chris Hager](https://www.metachris.com)
71 | * [mr-krille](https://github.com/mr-krille)
72 | * [Duoc Nguyen](https://github.com/nguyenvanduocit)
73 | * [Shu Ding](https://github.com/shudin)
74 | 
75 | 
76 | ## Changelog
77 | 
78 | v1.3.3
79 | 
80 | * Documentation
81 | 
82 | v1.3.1
83 | 
84 | * Changed `const` to `var` for compatibility with PhantomJS and UglifyJS
85 | * [Bugfix](https://github.com/metachris/vue-highlightjs/pull/6) to allow empty content
86 | 
87 | v1.2.2
88 | 
89 | * Fixed displaying and highlighting HTML tags passed as value to the directive (thanks @nguyenvanduocit)
90 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var hljs = require('highlight.js');
 4 | // import hljs from 'highlight.js';
 5 | 
 6 | var vueHighlightJS = {};
 7 | vueHighlightJS.install = function install(Vue) {
 8 |   Vue.directive('highlightjs', {
 9 |     deep: true,
10 |     bind: function bind(el, binding) {
11 |       // on first bind, highlight all targets
12 |       var targets = el.querySelectorAll('code');
13 |       var target;
14 |       var i;
15 | 
16 |       for (i = 0; i < targets.length; i += 1) {
17 |         target = targets[i];
18 | 
19 |         if (typeof binding.value === 'string') {
20 |           // if a value is directly assigned to the directive, use this
21 |           // instead of the element content.
22 |           target.textContent = binding.value;
23 |         }
24 | 
25 |         hljs.highlightElement(target);
26 |       }
27 |     },
28 |     componentUpdated: function componentUpdated(el, binding) {
29 |       // after an update, re-fill the content and then highlight
30 |       var targets = el.querySelectorAll('code');
31 |       var target;
32 |       var i;
33 | 
34 |       for (i = 0; i < targets.length; i += 1) {
35 |         target = targets[i];
36 |         if (typeof binding.value === 'string') {
37 |           target.textContent = binding.value;
38 |         }
39 |         hljs.highlightElement(target);
40 |       }
41 |     }
42 |   });
43 | };
44 | 
45 | module.exports = vueHighlightJS;
46 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-highlightjs",
 3 |   "version": "1.3.3",
 4 |   "description": "Syntax highlighting with highlight.js for Vue.js 2.x",
 5 |   "homepage": "https://github.com/metachris/vue-highlightjs",
 6 |   "bugs": {
 7 |     "url": "https://github.com/metachris/vue-highlightjs/issues"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/metachris/vue-highlightjs.git"
12 |   },
13 |   "author": "Chris Hager <chris@linuxuser.at> (https://www.metachris.com)",
14 |   "license": "MIT",
15 |   "main": "index.js",
16 |   "scripts": {
17 |     "test": "jest",
18 |     "lint": "./node_modules/.bin/eslint *.js"
19 |   },
20 |   "keywords": [
21 |     "vue",
22 |     "vuejs",
23 |     "syntax",
24 |     "highlight",
25 |     "highlight.js"
26 |   ],
27 |   "dependencies": {
28 |     "highlight.js": "*"
29 |   },
30 |   "devDependencies": {
31 |     "eslint": "^3.17.1",
32 |     "eslint-config-airbnb-base": "^11.1.1",
33 |     "eslint-config-es5": "^0.5.0",
34 |     "eslint-plugin-import": "^2.2.0",
35 |     "jest": "^20.0.3",
36 |     "vue": "^2.3.3"
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/test/index.test.js:
--------------------------------------------------------------------------------
 1 | const Vue = require('vue/dist/vue');
 2 | const VueHighlightJS = require('../index');
 3 | 
 4 | Vue.use(VueHighlightJS);
 5 | 
 6 | test('highlighting pre-defined code', () => {
 7 |   const template = `
 8 |     <div id="app">
 9 |       <pre v-highlightjs><code class="javascript">// Static source code
10 |       function(test) {
11 |           console.log(test)
12 |       }</code></pre>
13 |     </div>
14 |   `;
15 | 
16 |   const vm = new Vue({
17 |     template,
18 |   }).$mount();
19 | 
20 |   const result = vm.$el.innerHTML;
21 |   expect(result).toEqual(expect.stringContaining('<span class="hljs-comment">'));
22 |   expect(result).toEqual(expect.stringContaining('<span class="hljs-function">'));
23 |   expect(result).toEqual(expect.stringContaining('<span class="hljs-keyword">'));
24 |   expect(result).toEqual(expect.stringContaining('<span class="hljs-params">'));
25 |   expect(result).toEqual(expect.stringContaining('<span class="hljs-built_in">'));
26 | });
27 | 
28 | describe('highlighting dynamic code', () => {
29 |   let vm, result;
30 | 
31 |   beforeEach(() => {
32 |     const template = `
33 |       <div id="app">
34 |         <pre v-highlightjs="sourcecode"><code class="javascript"></code></pre>
35 |       </div>
36 |     `;
37 | 
38 |     vm = new Vue({
39 |       template,
40 |       data: {
41 |         sourcecode: 'const str = "This sourcecode will update dynamically"',
42 |       },
43 |     }).$mount();
44 |   });
45 | 
46 |   it('should highlight initial code', () => {
47 |     result = vm.$el.innerHTML;
48 |     expect(result).toEqual(expect.stringContaining('<span class="hljs-keyword">'));
49 |     expect(result).toEqual(expect.stringContaining('<span class="hljs-string">'));
50 |   })
51 | 
52 |   it('should highlight code when updating variable', () => {
53 |     vm.sourcecode = '123';
54 |     Vue.nextTick(function () {
55 |       result = vm.$el.innerHTML;
56 |       expect(result).toEqual('<pre><code class="javascript hljs"><span class="hljs-number">123</span></code></pre>');
57 |     });
58 |   });
59 | 
60 |   it('should updated highlighted block when updating code without any content', () => {
61 |     vm.sourcecode = '';
62 |     Vue.nextTick(function () {
63 |       result = vm.$el.innerHTML;
64 |       // console.log('result', result);
65 |       expect(result).toEqual('<pre><code class="javascript hljs"></code></pre>');
66 |     });
67 |   });
68 | });
69 | 
70 | 
71 | describe('highlighting code within dynamic content', () => {
72 |   let vm, result;
73 | 
74 |   beforeEach(() => {
75 |     const template = `
76 |       <div id="app">
77 |         <div v-html="sourcecode" v-highlightjs></div>
78 |       </div>
79 |     `;
80 | 
81 |     vm = new Vue({
82 |       template,
83 |       data: {
84 |         sourcecode: '<h2>foo</h2><pre><code class="javascript"></code></pre>',
85 |       },
86 |     }).$mount();
87 |   });
88 | 
89 |   it('should updated highlighted block when updating code without any content', () => {
90 |     vm.sourcecode = '<h2>bar</h2><pre><code class="javascript"></code></pre>';
91 |     Vue.nextTick(function () {
92 |       result = vm.$el.innerHTML;
93 |       // console.log('result', result);
94 |       expect(result).toEqual('<div><h2>bar</h2><pre><code class="javascript hljs"></code></pre></div>');
95 |     });
96 |   });
97 | });
98 | 


--------------------------------------------------------------------------------