vue3-highlight-component

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

<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>

Example

Props

on npm

on github