vue3-highlight-component

Description

With vue3-highlight-component, you can highlight code blocks within your application using the power of Highlight.js. In addition to supporting multiple programming languages, the component can be customized with different props to match the design of your application.

Installation

npm i highlight.js vue3-highlight-component

Basic Usage

1<template>
2  <HighLight  :with-header="true" language="js" header-language="JavaScript"  :code="code"/>
3</template>
4
5<script>
6import hljs from 'highlight.js'
7import HighLight from "vue3-highlight-component";
8
9// Register the language if it's not supported by default
10hljs.registerLanguage('js', require('highlight.js/lib/languages/javascript'))
11
12export default {
13  name: 'App',
14  data() {
15    return {
16      code: `your js code...`
17    }
18  },
19  components: {
20    HighLight
21  }
22}
23</script>
24<!-- you can choose alot of diffrent styles from highlight.js/styles in your node_modules -->
25<style src="highlight.js/styles/panda-syntax-dark.css"></style>

Example

Props

Name	Type	Description	Required	Default
code	String	The text of the code displayed by the component	✔️
language	String	The language of the code (is optional since highlight.js could automatically infer the language if it's not set.)	❌	highlight.js output
withHeader	Boolean	For headers with language name and copy option set to true.	❌	false
copyText	String	If you would like to add custom text to the copy option . Only relevant if withHeader is set.	❌	Copy code
copySuccessText	String	If you would like to add custom text to the success copy (Following the copy option click) . Only relevant if withHeader is set.	❌	Copied!
headerLanguage	String	If you want the language displayed in the header to have a custom name. Only relevant if withHeader is set.	❌	dispaly the props language

on npm

on github