https://github.com/highlightjs/vue-plugin

Highlight.js Vue Plugin
https://github.com/highlightjs/vue-plugin

highlight vue-plugin

Last synced: 27 days ago
JSON representation

Highlight.js Vue Plugin

• Host: GitHub
• URL: https://github.com/highlightjs/vue-plugin
• Owner: highlightjs
• License: bsd-3-clause
• Created: 2021-03-22T21:48:27.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-11-24T16:51:20.000Z (about 1 year ago)
• Last Synced: 2024-08-05T17:45:46.876Z (4 months ago)
• Topics: highlight, vue-plugin
• Language: TypeScript
• Homepage:
• Size: 36.1 KB
• Stars: 197
• Watchers: 6
• Forks: 28
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-hacking-lists - highlightjs/vue-plugin - Highlight.js Vue Plugin (TypeScript)

README

        
# Highlight.js plugin for Vue.js

[![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)

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

[![slack](https://badgen.net/badge/icon/slack?icon=slack&label&color=pink)](https://join.slack.com/t/highlightjs/shared_invite/zt-mj0utgqp-TNFf4VQICnDnPg4zMHChFw)

This plugin provides a `highlightjs` component for use in your Vue.js 3 applications:

```html



    

    

    

    



```


Note: For Vue.js version 2 support see the [1-stable](https://github.com/highlightjs/vue-plugin/tree/1-stable) branch here on GitHub.  Version 1.x.x is compatible with Vue.js v2; version 2.x.x with Vue.js v3.

## Using the pre-built libraries

```html

```

Then simply register the plugin with Vue:

```js

const app = createApp(App)

app.use(hljsVuePlugin)

```

## Using ES6 modules / bundling

```js

import 'highlight.js/styles/stackoverflow-light.css'

import hljs from 'highlight.js/lib/core';

import javascript from 'highlight.js/lib/languages/javascript';

import hljsVuePlugin from "@highlightjs/vue-plugin";

hljs.registerLanguage('javascript', javascript);

const app = createApp(App)

app.use(hljsVuePlugin)

app.mount('#app')

```

Note: The plugin imports `highlight.js/lib/core` internally (but no languages).  Thanks to the magic of ES6 modules you can import Highlight.js anywhere to register languages or configure the library.  Any import of Highlight.js refers to the same singleton instance of the library, so configuring the library anywhere configures it everywhere.

You can also simply load all "common" languages at once (as of v11):

```js

import 'highlight.js/styles/stackoverflow-light.css'

import 'highlight.js/lib/common';

import hljsVuePlugin from "@highlightjs/vue-plugin";

const app = createApp(App)

app.use(hljsVuePlugin)

app.mount('#app')

```

Note that the `highlight.js/lib/common` import does not import the `hljs` object because it registers common languages internally and modern web bundlers like `webpack` will optimize out unused imported names. If you want to customize the `hljs` object, you can import it like the [previous example](#using-es6-modules--bundling).

## Using component locally

```vue

    

import 'highlight.js/lib/common';

import hljsVuePlugin from "@highlightjs/vue-plugin";

export default {

    components: {

        highlightjs: hljsVuePlugin.component

    }

}

```

## Building the pre-built library from source

We use rollup to build the `dist` distributable.

```

npm run build

```