vue-hljs

Overview

ℹ️ 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.

Install

 npm install vue-hljs highlight.js

or

 yarn add vue-hljs highlight.js

Example

 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/dist/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>

Use your own style

This plugin use gruvbox-dark as default style.

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

Other similar project

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