Vue component for highlighting code or syntax with modern style, copy functionality, multicode and powered by Highlight.js
npm install vue-code-highlighter highlight.js
// or use yarn
yarn add vue-code-highlighter highlight.jsThis package support either composition and options api with typescript or javascript.
import { VueCodeHighlighter, VueCodeHighlighterMulti } from 'vue-code-highlighter';
import 'vue-code-highlighter/dist/style.css'This package does not need to call CSS from the highlight.js package because I have already wrapped it. What you need to do is install the highlight.js package.
Example code and demo available in ichsanputr.github.io/vue-code-highlighter
There are 2 types of components, namely VueCodeHighlighter and VueCodeHighlighterMulti, both of them have different props.
VueCodeHighlighter
| Attribute | Type | Is Required | Description |
|---|---|---|---|
| lang | String | true | Code languange from Highlighter cheatset, see Supported languange |
| code | String | true | Plain code which will be displayed, please wrap your code using backtick (``) |
| title | String | no | Custom title in header |
| disableCopy | Boolean | no | Disable copy button and copy functionality to code |
VueCodeHighlighterMulti
| Attribute | Type | Is Required | Description |
|---|---|---|---|
| lang | Array | true | See example below |
| disableCopy | Boolean | no | Disable copy button and copy functionality to code |
Example for lang props in Multi Code.
const codeMulti = [
{
lang: "js",
title: "vue",
code: codeVue.value
},
{
lang: "html",
code: codeHtml.value,
title: 'html'
},
{
lang: "css",
code: codeCss.value,
},
]