vue-hljs
v3.0.1
Published
Highlight.js plugin for Vue.js 3.0
Downloads
4,132
Readme
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.