ℹ️ Update: Highlight.js has released an official vue plugin since Mar 23, 2021. See highlightjs/vue-plugin.

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

npm install vue-hljs highlight.js

or

yarn add vue-hljs highlight.js

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 })

<div v-highlight> <pre> <!-- you can specify language by modifing the class attribute --> <code class="typescript">...</code> </pre> </div>

This plugin use gruvbox-dark as default style.

You can write your own style or see highlight.js demo. And then import your css file in Vue project entry.

• highlightjs/vue-plugin: Highlight.js official plugin.