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

Example

Basic Usage

<template>
  <HighLight  :with-header="true" language="js" header-language="JavaScript"  :code="code"/>
</template>

<script>
import hljs from 'highlight.js'
import HighLight from "vue3-highlight-component";

// Register the language if it's not supported by default
hljs.registerLanguage('js', require('highlight.js/lib/languages/javascript'))

export default {
  name: 'App',
  data() {
    return {
      code: `your js code...`
    }
  },
  components: {
    HighLight
  }
}
</script>
<!-- you can choose alot of diffrent styles from highlight.js/styles in your node_modules -->
<style src="highlight.js/styles/panda-syntax-dark.css"></style>

Props

NameTypeDescriptionRequiredDefaultcodeStringThe text of the code displayed by the component✔️languageStringThe language of the code (is optional since highlight.js could automatically infer the language if it’s not set.)❌highlight.js outputwithHeaderBooleanFor headers with language name and copy option set to true.❌falsecopyTextStringIf you would like to add custom text to the copy option . Only relevant if withHeader is set.❌Copy codecopySuccessTextStringIf you would like to add custom text to the success copy (Following the copy option click) . Only relevant if withHeader is set.❌Copied!headerLanguageStringIf 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

GitHub

View Github