vue-code-highlighter

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

VueCodeHighlighterMulti

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