# vue-hljs

> Highlight.js plugin for Vue.js 3.0

Latest version **3.0.3** (published 2025-06-05) · BSD-3 license · 0 weekly downloads

## Install

```sh
npm install vue-hljs
pnpm add vue-hljs
yarn add vue-hljs
bun add vue-hljs
```

## Health

**Score 40/100 (D)** — status: stable.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 3.0.3 |
| Published | 2025-06-05 |
| First published | 2017-01-06 |
| Weekly downloads | 0 |
| License | BSD-3 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 19 |
| Author | SunskyXH |
| Maintainers | sunskyxh |
| Keywords | highlight, hljs, vue |

## Links

- npm: https://www.npmjs.com/package/vue-hljs
- Repository: https://github.com/sunskyxh/vue-hljs
- Homepage: https://github.com/sunskyxh/vue-hljs#readme
- Issues: https://github.com/sunskyxh/vue-hljs/issues
- npm.io page: https://npm.io/package/vue-hljs

## Alternatives

- [@oh-my-pi/pi-natives](https://npm.io/package/@oh-my-pi/pi-natives.md) — 51.8K weekly downloads
- [@capgo/capacitor-light-sensor](https://npm.io/package/@capgo/capacitor-light-sensor.md) — 3.0K weekly downloads
- [@heyhuynhgiabuu/pi-diff](https://npm.io/package/@heyhuynhgiabuu/pi-diff.md) — 492 weekly downloads
- [@lotsa/verdant-lang-asm](https://npm.io/package/@lotsa/verdant-lang-asm.md) — 38 weekly downloads
- [new-era-syntax](https://npm.io/package/new-era-syntax.md) — 20 weekly downloads

## Recent versions

- 3.0.3 (latest) — 2025-06-05
- 3.0.2 — 2025-06-04
- 3.0.1 — 2023-01-11
- 3.0.0 — 2022-08-31
- 2.0.0 — 2021-02-02
- 1.1.2 — 2018-10-23
- 1.0.0 — 2017-12-12
- 0.2.0 — 2017-11-30
- 0.1.8 — 2017-11-30
- 0.1.7 — 2017-11-30
- 0.1.6 — 2017-11-30
- 0.1.5 — 2017-02-08
- 0.1.4 — 2017-02-08
- 0.1.3 — 2017-02-08
- 0.1.2 — 2017-02-08
- … 2 more at https://npm.io/package/vue-hljs/versions

## README

<a href="https://npmjs.com/package/vue-hljs"><img src="https://img.shields.io/npm/v/vue-hljs.svg" alt="npm package"></a>
  <a href="https://github.com/SunskyXH/vue-hljs/actions/workflows/ci.yml"><img src="https://github.com/SunskyXH/vue-hljs/actions/workflows/ci.yml/badge.svg" alt="build status"></a>

# vue-hljs 

## Overview
ℹ️ Update: Highlight.js has released an official vue plugin since Mar 23, 2021. See [highlightjs/vue-plugin](https://github.com/highlightjs/vue-plugin).

This is a vue plugin which allows you to highlight code blocks via vue-directive.
## Install

```bash
npm install vue-hljs highlight.js
```
or
```bash
yarn add vue-hljs highlight.js
```

## Example
```typescript
import { createApp } from 'vue'
import vueHljs from "vue-hljs";
import hljs from "highlight.js";
//if you want to use default color, import this css file
import "vue-hljs/style.css";

const app = createApp({})
app.use(vueHljs, { hljs })
```

```html
<div v-highlight>
  <pre>
    <!-- you can specify language by modifing the class attribute -->
    <code class="typescript">...</code>
  </pre>
</div>
```
## Use your own style

This plugin use gruvbox-dark as default style.

You can write your own style or see [highlight.js demo](https://highlightjs.org/static/demo/).
And then import your css file in Vue project entry.

## Other similar projects

- [highlightjs/vue-plugin](https://github.com/highlightjs/vue-plugin): Highlight.js official plugin.

---
_Source: https://npm.io/package/vue-hljs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._