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 language from Highlighter cheatset, see Supported language
code	String	true	Plain code which will be displayed, please wrap your code using backticks (``)
title	String	no	Custom title in header
disableCopy	Boolean	no	Disable copy button and copy functionality to code
maxHeight	Number	no	(ex :max-height=300) Maximum height of the code block, which will enable scrolling if exceeded

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