Vue Code Highlighter

src="https://img.shields.io/bundlephobia/minzip/vue-code-highlighter" />
src="https://img.shields.io/npm/dt/vue-code-highlighter.svg" alt="NPM Downloads">
alt="License">

Vue component for highlighting code or syntax with modern style, copy functionality, multicode and powered by Highlight.js

Installation

``bash
npm install vue-code-highlighter highlight.js

// or use yarn
yarn add vue-code-highlighter highlight.js
`

Usage

$3

This package support either composition and options api with typescript or javascript.

`ts
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.

$3

Example code and demo available in ichsanputr.github.io/vue-code-highlighter

Props

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 |
|:-------------|:--------:|:--------------:|:------------------------------------------------------------------------------|
| code | Array | true | See example below |
disableCopy | Boolean | no | Disable copy button and copy functionality to code |

Example for lang props in Multi Code.

`js
const codeMulti = [
{
lang: "js",
title: "vue",
code: codeVue.value
},
{
lang: "html",
code: codeHtml.value,
title: 'html'
},
{
lang: "css",
code: codeCss.value,
},
]
``