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
code	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,
  },
]

Package detail