🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

@highlightjs/vue-plugin

Package Overview
Dependencies
Maintainers
5
Versions
9
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@highlightjs/vue-plugin - npm Package Compare versions

Comparing version

1.0.2
to
2.0.0

dist/highlightjs-vue.esm.min.js
dist/lib/utils.d.ts
dist/lib/utils.d.ts.map
dist/vue.d.ts
dist/vue.d.ts.map
src/lib/utils.ts
src/vue.ts

2

dist/highlightjs-vue.min.js

@@ -1,1 +0,1 @@

var hljsVuePlugin=function(e){"use strict";const t={props:["language","code","autodetect"],data:function(){return{detectedLanguage:"",unknownLanguage:!1}},computed:{className(){return this.unknownLanguage?"":"hljs "+this.detectedLanguage},highlighted(){if(!this.autoDetect&&!e.getLanguage(this.language))return console.warn(`The language "${this.language}" you specified could not be found.`),this.unknownLanguage=!0,this.code.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#x27;");let t={};return this.autoDetect?(t=e.highlightAuto(this.code),this.detectedLanguage=t.language):(t=e.highlight(this.code,{language:this.language,ignoreIllegals:this.ignoreIllegals}),this.detectedLanguage=this.language),t.value},autoDetect(){return!this.language||(e=this.autodetect,Boolean(e||""===e));var e},ignoreIllegals:()=>!0},render(e){return e("pre",{},[e("code",{class:this.className,domProps:{innerHTML:this.highlighted}})])}};return{install(e){e.component("highlightjs",t)},component:t}}(hljs);
var hljsVuePlugin=function(e,u){"use strict";var n=e.defineComponent({props:{code:{type:String,required:!0},language:{type:String,default:""},autodetect:{type:Boolean,default:!0},ignoreIllegals:{type:Boolean,default:!0}},setup:function(n){var t=e.ref(n.language);e.watch((function(){return n.language}),(function(e){t.value=e}));var a=e.computed((function(){return n.autodetect||!t.value})),l=e.computed((function(){return!a.value&&!u.getLanguage(t.value)}));return{className:e.computed((function(){return l.value?"":"hljs "+t.value})),highlightedCode:e.computed((function(){var e;if(l.value)return console.warn('The language "'+t.value+'" you specified could not be found.'),n.code.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#x27;");if(a.value){var r=u.highlightAuto(n.code);return t.value=null!==(e=r.language)&&void 0!==e?e:"",r.value}return(r=u.highlight(n.code,{language:t.value,ignoreIllegals:n.ignoreIllegals})).value}))}},render:function(){return e.h("pre",{},[e.h("code",{class:this.className,innerHTML:this.highlightedCode})])}});return{install:function(e){e.component("highlightjs",n)}}}(Vue,hljs);

16

package.json
{
"name": "@highlightjs/vue-plugin",
"version": "1.0.2",
"version": "2.0.0",
"description": "Highlight.js Vue Plugin",
"main": "src/vue.js",
"main": "dist/highlightjs-vue.min.js",
"module": "dist/highlightjs-vue.esm.min.js",
"types": "dist/highlightjs-vue.d.ts",
"scripts": {
"build": "rollup -c",
"test": "echo \"Error: no test specified\" && exit 1",
"publish": "npm publish --access public"
"publish": "npm publish --access public --tag next"
},

@@ -16,6 +18,10 @@ "type": "module",

"rollup": "^2.42.3",
"rollup-plugin-terser": "^7.0.2"
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^0.30.0",
"tslib": "^2.2.0",
"typescript": "^4.2.4"
},
"dependencies": {
"highlight.js": "^10.7.2"
"highlight.js": "^10.7.2",
"vue": "^3"
},

@@ -22,0 +28,0 @@ "files": [

35

README.md

@@ -1,5 +0,9 @@

# Highlight.js plugin for Vue.js v2
# Highlight.js plugin for Vue.js
[![latest version](https://badgen.net/npm/v/@highlightjs/vue-plugin?label=latest)](https://www.npmjs.com/package/@highlightjs/vue-plugin)
[![latest version](https://badgen.net/npm/v/@highlightjs/vue-plugin/latest?label=latest)](https://www.npmjs.com/package/@highlightjs/vue-plugin)
[![latest version](https://badgen.net/npm/v/@highlightjs/vue-plugin/next?label=next)](https://www.npmjs.com/package/@highlightjs/vue-plugin)
![vue 3](https://badgen.net/badge/vue/3/green)
![vue 2](https://badgen.net/badge/vue/2/green)
[![license](https://badgen.net/github/license/highlightjs/vue-plugin?color=cyan)](https://github.com/highlightjs/vue-plugin/blob/main/LICENSE)
[![publish size](https://badgen.net/packagephobia/publish/@highlightjs/vue-plugin?label=size)](https://packagephobia.com/result?p=@highlightjs/vue-plugin)

@@ -10,7 +14,6 @@ [![gzipped size](https://badgen.net/bundlephobia/minzip/@highlightjs/vue-plugin?label=gzipped)](https://bundlephobia.com/result?p=@highlightjs/vue-plugin)

This plugin provides a `highlightjs` component for use
in your Vue.js applications:
This plugin provides a `highlightjs` component for use in your Vue.js 3 applications:
```html
<div id="app">
<div id="app">
<!-- bind to a data property named `code` -->

@@ -20,5 +23,7 @@ <highlightjs autodetect :code="code" />

<highlightjs language='javascript' code="var x = 5;" />
</div>
</div>
```
Note: For Vue.js version 2 support see the [1-stable](https://github.com/highlightjs/vue-plugin/tree/1-stable) branch here on GitHub. The `latest` tag via NPM is compatible with Vue.js v2; the `next` tag Vue.js v3.
## Using the pre-built libraries

@@ -35,3 +40,4 @@

```js
Vue.use(hljsVuePlugin);
const app = createApp(App)
app.use(hljsVuePlugin)
```

@@ -45,7 +51,9 @@

import javascript from 'highlight.js/lib/languages/javascript';
import vuePlugin from "@highlightjs/vue-plugin";
import hljsVuePlugin from "@highlightjs/vue-plugin";
hljs.registerLanguage('javascript', javascript);
Vue.use(vuePlugin);
const app = createApp(App)
app.use(hljsVuePlugin)
app.mount('#app')
```

@@ -59,4 +67,7 @@

import hljs from 'highlight.js/lib/common';
import vuePlugin from "@highlightjs/vue-plugin";
Vue.use(vuePlugin);
import hljsVuePlugin from "@highlightjs/vue-plugin";
const app = createApp(App)
app.use(hljsVuePlugin)
app.mount('#app')
```

@@ -70,2 +81,2 @@

npm run build
```
```
src/lib/utils.js
src/vue.js