Vue Code Highlighter

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

Installation

npm install vue-code-highlighter highlight.js

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

Usage

Importing

This 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 & Demo

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

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