Browser test

├── test ├── markup │ ├── hello-world.txt │ └── hello-world.expect.txt ├── index.html ├── index.js └── detect.txt ├── .editorconfig ├── vue.d.ts ├── rollup.config.js ├── README.md ├── .gitignore ├── package.json ├── LICENSE └── vue.js /test/markup/hello-world.txt: -------------------------------------------------------------------------------- 1 |

2 | {{ message }} 3 |

-------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | charset = utf-8 7 | trim_trailing_whitespace = false 8 | insert_final_newline = true -------------------------------------------------------------------------------- /test/markup/hello-world.expect.txt: -------------------------------------------------------------------------------- 1 | <div id="app"> 2 | {{ message }} 3 | </div> -------------------------------------------------------------------------------- /vue.d.ts: -------------------------------------------------------------------------------- 1 | import hljs from "highlight.js"; 2 | 3 | export = hljsDefineVue; 4 | 5 | /** 6 | * Add Vue styling to highlight.js 7 | * @param hljs 8 | */ 9 | declare function hljsDefineVue(hljs: hljs.HLJSStatic): void; 10 | 11 | declare namespace hljsDefineVue { 12 | /** 13 | * Manually add Vue styling to highlight.js 14 | * 15 | * ```typescript 16 | * import hljs from "highlight.js" 17 | * hljs.registerLanguage("vue", definer) 18 | * ``` 19 | * @param hljs 20 | */ 21 | function definer(hljs: hljs.HLJSStatic): hljs.IModeBase; 22 | } -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import { terser } from "rollup-plugin-terser"; 2 | import pkg from "./package.json"; 3 | 4 | const builds = [ 5 | { format: "esm", minify: false }, 6 | { format: "cjs", minify: false }, 7 | { format: "umd", minify: false }, 8 | { format: "umd", minify: true } 9 | ]; 10 | 11 | export default builds.map(({ format, minify }) => { 12 | const minExtension = minify ? ".min" : ""; 13 | return { 14 | input: "vue.js", 15 | output: { 16 | name: pkg.name, 17 | exports: "named", 18 | file: `dist/${pkg.name}.${format}${minExtension}.js`, 19 | format 20 | }, 21 | external: Object.keys(pkg.peerDependencies || {}), 22 | plugins: [minify ? terser() : null] 23 | }; 24 | }); 25 | -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Browser test 6 | 7 | 8 | 12 | 13 | 14 | 18 | 19 | 20 |


21 |     var app = new Vue({
22 |       el: '#app',
23 |       data: {
24 |         message: 'Hello Vue!'
25 |       }
26 |     })
27 |

28 | 29 | 30 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | `highlight.js` syntax definition for Vue. 2 | 3 | Support for single-file [Vue.js](https://vuejs.org/) components. 4 | The files with `.vue` extension allow to write html, javascript/typescript and styles in the same file. 5 | 6 | ### Usage 7 | 8 | Simply include the `highlight.js` script package in your webpage or node app, load up this module and apply it to `hljs`. 9 | 10 | If you're not using a build system and just want to embed this in your webpage: 11 | 12 | ```html 13 | 14 | 15 | 19 | ``` 20 | 21 | If you're using webpack / rollup / browserify / node: 22 | 23 | ```javascript 24 | var hljs = require("highlightjs"); 25 | var hljsDefineVue = require("highlightjs-vue"); 26 | 27 | hljsDefineVue(hljs); 28 | hljs.initHighlightingOnLoad(); 29 | ``` 30 | 31 | ### License 32 | 33 | ![GitHub](https://img.shields.io/github/license/highlightjs/highlightjs-vue?logo=License%20BSD-3-Clause) 34 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist 2 | 3 | # Logs 4 | logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # next.js build output 63 | .next 64 | -------------------------------------------------------------------------------- /test/index.js: -------------------------------------------------------------------------------- 1 | var should = require("should"); 2 | var promisify = require("util").promisify; 3 | let path = require("path"); 4 | let hljs = require("highlight.js"); 5 | const fs = require("fs"); 6 | const hljsDefineVue = require("../vue"); 7 | 8 | const readdir = promisify(fs.readdir), 9 | readFile = promisify(fs.readFile); 10 | 11 | describe("Vue.js Tests", () => { 12 | beforeEach(() => { 13 | hljsDefineVue(hljs); 14 | }); 15 | it("generates correct markup", async () => { 16 | var files = await readdir(path.join(__dirname, "markup")); 17 | files = files.filter(f => !f.includes(".expect.")); 18 | for (var f of files) { 19 | let fn = path.join(__dirname, "markup", f); 20 | let expectFn = fn.replace(".txt", ".expect.txt"); 21 | var code = await readFile(fn, "utf-8"); 22 | var exp = await readFile(expectFn, "utf-8"); 23 | var actual = hljs.highlight("vue", code).value; 24 | actual.trim().should.eql(exp.trim(), f); 25 | } 26 | }); 27 | it("is detected correctly", async () => { 28 | var code = await readFile(path.join(__dirname, "detect.txt"), "utf-8"); 29 | var actual = hljs.highlightAuto(code).language; 30 | actual.should.eql("vue"); 31 | }); 32 | }); 33 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "highlightjs-vue", 3 | "version": "1.0.0", 4 | "description": "Highlight Single-File Components of Vue.js Framework", 5 | "types": "vue.d.ts", 6 | "main": "dist/highlightjs-vue.cjs.js", 7 | "module": "dist/highlightjs-vue.esm.js", 8 | "files": [ 9 | "dist", 10 | "vue.d.ts" 11 | ], 12 | "scripts": { 13 | "build": "npm run clean && rollup --config", 14 | "clean": "rimraf dist package-lock.json", 15 | "test": "./node_modules/.bin/mocha --reporter spec" 16 | }, 17 | "repository": { 18 | "type": "git", 19 | "url": "git+https://github.com/highlightjs/highlightjs-vue.git" 20 | }, 21 | "keywords": [ 22 | "highlight", 23 | "hljs", 24 | "vue.js", 25 | "vue" 26 | ], 27 | "author": "Sara Lissette Luis Ibáñez (https://github.com/LissetteIbnz)", 28 | "license": "BSD-3-Clause", 29 | "bugs": { 30 | "url": "https://github.com/highlightjs/highlightjs-vue/issues" 31 | }, 32 | "homepage": "https://github.com/highlightjs/highlightjs-vue#readme", 33 | "dependencies": {}, 34 | "devDependencies": { 35 | "@types/highlight.js": "^9.12.3", 36 | "highlight.js": "^9.15.10", 37 | "mocha": "^6.2.0", 38 | "rimraf": "^3.0.0", 39 | "rollup": "^1.27.1", 40 | "rollup-plugin-terser": "^5.1.2", 41 | "should": "^13.2.3" 42 | }, 43 | "peerDependencies": { 44 | "highlight.js": "*" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /test/detect.txt: -------------------------------------------------------------------------------- 1 | 8 | 9 | 21 | 22 | 28 | 29 | 36 | 37 | 44 | 45 | 50 | 51 | 56 | 57 | 62 | 63 | 69 | 70 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | BSD 3-Clause License 2 | 3 | Copyright (c) 2019, Sara Lissette Luis Ibáñez 4 | All rights reserved. 5 | 6 | Redistribution and use in source and binary forms, with or without 7 | modification, are permitted provided that the following conditions are met: 8 | 9 | 1. Redistributions of source code must retain the above copyright notice, this 10 | list of conditions and the following disclaimer. 11 | 12 | 2. Redistributions in binary form must reproduce the above copyright notice, 13 | this list of conditions and the following disclaimer in the documentation 14 | and/or other materials provided with the distribution. 15 | 16 | 3. Neither the name of the copyright holder nor the names of its 17 | contributors may be used to endorse or promote products derived from 18 | this software without specific prior written permission. 19 | 20 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" 21 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE 22 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 23 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE 24 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL 25 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR 26 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER 27 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, 28 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 29 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 30 | -------------------------------------------------------------------------------- /vue.js: -------------------------------------------------------------------------------- 1 | /* 2 | Language: Vue.js 3 | Requires: xml.js, pug.js, javascript.js, typescript.js, css.js, stylus.js, scss.js 4 | Author: Sara Lissette Luis Ibáñez 5 | Description: Single-File Components of Vue.js Framework 6 | */ 7 | var module = module ? module : {}; 8 | 9 | function hljsDefineVue(hljs) { 10 | return { 11 | subLanguage: "xml", 12 | contains: [ 13 | hljs.COMMENT("", { 14 | relevance: 10, 15 | }), 16 | { 17 | begin: /^(\s*)(