Version 4

.eslintignore

@@ -0,0 +1,3 @@
+.yarn/
+dist/
+lib/

.eslintrc.json

@@ -0,0 +1,22 @@
+{
+	"root": true,
+	"extends": "gluons/vue-ts",
+	"env": {
+		"jest": true
+	},
+	"globals": {
+		"IS_WEB_BUNDLE": "readonly"
+	},
+	"parserOptions": {
+		"project": "./tsconfig-eslint.json"
+	},
+	"overrides": [
+		{
+			"files": "*.ts",
+			"extends": "gluons/ts",
+			"parserOptions": {
+				"project": "./tsconfig-eslint.json"
+			}
+		}
+	]
+}

.gitignore

@@ -1,6 +1,6 @@
-
-# Created by https://www.gitignore.io/api/node,linux,windows
-# Edit at https://www.gitignore.io/?templates=node,linux,windows
+
+# Created by https://www.toptal.com/developers/gitignore/api/node,linux,windows
+# Edit at https://www.toptal.com/developers/gitignore?templates=node,linux,windows
 
 ### Linux ###
 *~
@@ -24,6 +24,10 @@ logs
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 
 # Runtime data
 pids
@@ -36,6 +40,7 @@ lib-cov
 
 # Coverage directory used by tools like istanbul
 coverage
+*.lcov
 
 # nyc test coverage
 .nyc_output
@@ -59,12 +64,21 @@ jspm_packages/
 # TypeScript v1 declaration files
 typings/
 
+# TypeScript cache
+*.tsbuildinfo
+
 # Optional npm cache directory
 .npm
 
 # Optional eslint cache
 .eslintcache
 
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
 # Optional REPL history
 .node_repl_history
 
@@ -76,15 +90,25 @@ typings/
 
 # dotenv environment variables file
 .env
+.env.test
+.env*.local
 
 # parcel-bundler cache (https://parceljs.org/)
 .cache
+.parcel-cache
 
-# next.js build output
+# Next.js build output
 .next
 
-# nuxt.js build output
+# Nuxt.js build / generate output
 .nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
 
 # vuepress build output
 .vuepress/dist
@@ -95,12 +119,19 @@ typings/
 # FuseBox cache
 .fusebox/
 
-#DynamoDB Local files
+# DynamoDB Local files
 .dynamodb/
 
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
 ### Windows ###
 # Windows thumbnail cache files
 Thumbs.db
+Thumbs.db:encryptable
 ehthumbs.db
 ehthumbs_vista.db
 
@@ -123,7 +154,15 @@ $RECYCLE.BIN/
 # Windows shortcuts
 *.lnk
 
-# End of https://www.gitignore.io/api/node,linux,windows
+# End of https://www.toptal.com/developers/gitignore/api/node,linux,windows
+
+# Yarn 2
+.yarn/*
+!.yarn/releases
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+.pnp.*
 
 # Dist files
 dist/

.prettierignore

@@ -0,0 +1 @@
+dev/App.vue

.travis.yml

@@ -1,7 +1,5 @@
 language: node_js
 node_js:
-  - "node"
   - "lts/*"
-before_install:
-  - curl -o- -L https://yarnpkg.com/install.sh | bash
-  - export PATH="$HOME/.yarn/bin:$PATH"
+notifications:
+  email: false

.vscode/settings.json

@@ -1,4 +1,3 @@
 {
-	"typescript.tsdk": "node_modules/typescript/lib",
-	"eslint.enable": false
+	"typescript.tsdk": "node_modules/typescript/lib"
 }

.yarnrc.yml

@@ -0,0 +1,9 @@
+nodeLinker: node-modules
+
+npmRegistryServer: "https://registry.npmjs.org"
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"
+
+yarnPath: .yarn/releases/yarn-2.4.1.cjs

README.md

@@ -16,23 +16,19 @@
 [![npm](https://nodei.co/npm/vue-highlight.js.png?downloads=true&downloadRank=true&stars=true)](https://www.npmjs.com/package/vue-highlight.js)
 
 ```bash
-npm install highlight.js vue-highlight.js
+npm install highlight.js vue-highlight.js@next
 ```
 
-**Or [Yarn](https://yarnpkg.com):**
+**Via [Yarn](https://yarnpkg.com):**
 
 ```bash
-yarn add highlight.js vue-highlight.js
+yarn add highlight.js vue-highlight.js@next
 ```
 
----
-
-**For [TypeScript](https://www.typescriptlang.org/), Please install [`@types/highlight.js`](https://www.npmjs.com/package/@types/highlight.js).**
+**Via [pnpm](https://pnpm.js.org):**
 
 ```bash
-npm install --save-dev @types/highlight.js
-# or
-yarn add --dev @types/highlight.js
+pnpm add highlight.js vue-highlight.js@next
 ```
 
 ## 🎬 Demo
@@ -138,15 +134,15 @@ There are 2 ways to import Highlight.js languages.
 ## ⛕ Plugin Options
 
 ### `languages`
-**Type:** `{ [name: string]: HLJSLang }`  
+**Type:** `{ [name: string]: LanguageFn }`  
 **Default:** `{}`
 
 Highlight.js languages.  
 Add the languages that you want to use here.
 
-`name` is the name of language to register with **Highlight.js**' [`registerLanguage(name, language)`](https://highlightjs.readthedocs.io/en/latest/api.html#registerlanguage-name-language) API.
+`name` is the name of language to register with **Highlight.js**' [`registerLanguage(languageName, languageDefinition)`](https://highlightjs.readthedocs.io/en/latest/api.html#registerlanguage-languagename-languagedefinition) API.
 
-_See https://github.com/isagalaev/highlight.js#commonjs about importing each language from **highlight.js**._
+_See https://github.com/isagalaev/highlight.js#nodejs about importing each language from **highlight.js**._
 
 ## 📚 API
 
@@ -161,7 +157,7 @@ Static code content.
 ##### lang
 **Type:** `String`
 
-Highlight.js [language](http://highlightjs.readthedocs.io/en/latest/css-classes-reference.html#language-names-and-aliases).
+Highlight.js [language](https://github.com/isagalaev/highlight.js/blob/master/SUPPORTED_LANGUAGES.md).
 
 ##### inline
 **Type:** `Boolean`  
@@ -184,7 +180,7 @@ Code content in code block.
 
 Enable auto detecting code language.
 
-> Code will be detected by [highlight.js' `highlightAuto`](https://highlightjs.readthedocs.io/en/latest/api.html#highlightauto-value-languagesubset) function.
+> Code will be detected by [highlight.js' `highlightAuto`](https://highlightjs.readthedocs.io/en/latest/api.html#highlightauto-code-languagesubset) function.
 
 **`auto` will work well when you import all Highlight.js languages.**
 

dev/main.ts

@@ -3,13 +3,19 @@
 import Vue from 'vue';
 import VueHighlightJS, { Options } from '../src';
 
-import '../lib/allLanguages';
+import javascript from 'highlight.js/lib/languages/javascript';
+import vue from '../lib/languages/vue';
 
 import App from './App.vue';
 
 import 'highlight.js/styles/agate.css';
 
-Vue.use<Options>(VueHighlightJS);
+Vue.use<Options>(VueHighlightJS, {
+	languages: {
+		javascript,
+		vue
+	}
+});
 
 new Vue({
 	el: '#app',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-highlight.js",
-  "version": "3.1.0",
+  "version": "4.0.1-beta",
   "description": "Highlight.js syntax highlighter component for Vue.",
   "main": "./dist/vue-highlight.cjs.js",
   "module": "./dist/vue-highlight.es.js",
@@ -18,9 +18,9 @@
     "prelib": "rimraf lib/*",
     "lib": "tsc -p tsconfig-lib.json",
     "build": "npm run lib && vue-up build",
-    "lint": "tslint -p .",
+    "lint": "eslint .",
     "format": "prettier --write \"{src/**,src-lib/**,dev/**/*.ts}\"",
-    "test": "npm run lint && jest"
+    "test": "npm run lib && npm run lint && jest"
   },
   "repository": {
     "type": "git",
@@ -41,37 +41,37 @@
   },
   "homepage": "https://gluons.github.io/vue-highlight.js/",
   "peerDependencies": {
-    "highlight.js": "^9.18.5",
+    "highlight.js": "10",
     "vue": "2"
   },
   "devDependencies": {
-    "@gluons/prettier-config": "^2.0.0",
-    "@gluons/vue-up": "^0.7.1",
-    "@types/highlight.js": "^9.12.3",
-    "@types/jest": "^26.0.15",
-    "@types/node": "8",
-    "@vue/test-utils": "^1.1.1",
-    "csstype": "^3.0.5",
-    "highlight.js": "^9.15.8",
+    "@gluons/prettier-config": "^2.0.6",
+    "@gluons/vue-up": "^0.8.1",
+    "@types/jest": "^26.0.22",
+    "@types/node": "14",
+    "@vue/test-utils": "^1.1.4",
+    "csstype": "^3.0.7",
+    "eslint": "^7.24.0",
+    "eslint-config-gluons": "^6.1.0",
+    "highlight.js": "^10.7.2",
     "jest": "^26.6.3",
-    "npm-run-all": "^4.1.1",
+    "npm-run-all": "^4.1.5",
     "prettier": "^2.2.1",
-    "rimraf": "^3.0.0",
-    "ts-jest": "^26.4.4",
+    "rimraf": "^3.0.2",
+    "ts-jest": "^26.5.4",
     "tsconfig-gluons": "^1.1.0",
-    "tslint": "^6.1.3",
-    "tslint-config-gluons": "^2.1.0",
-    "typescript": "^4.1.2",
-    "vue": "^2.6.10",
+    "typescript": "^4.2.4",
+    "vue": "^2.6.12",
     "vue-class-component": "^7.2.6",
     "vue-property-decorator": "^9.1.2",
-    "vue-template-compiler": "^2.6.10"
+    "vue-template-compiler": "^2.6.12"
   },
   "dependencies": {
     "detect-indent": "^6.0.0",
     "redent": "^3.0.0",
-    "tslib": "^2.0.3"
+    "tslib": "^2.2.0"
   },
+  "prettier": "@gluons/prettier-config",
   "jest": {
     "preset": "ts-jest",
     "globals": {