Vue3 highlight-code

⚙️ Installation

Via npm:

npm install highlight.js vue3-highlight-code text-loader

Or Yarn:

yarn add highlight.js vue3-highlight-code text-loader

Usage

There are way to import Highlight.js languages.

import { createApp } from 'vue'
import App from './App.vue'
import code from 'vue3-highlight-code'
import 'vue3-highlight-code/dist/vue3-highlight-code.css'
import 'highlight.js/styles/atom-one-dark.css'
const app = createApp(App)
app.use(code)
app.mount('#app')

Vue file

<template>
  <drag-code :code="currentCode" suffix="vue"></drag-code>
</template>

<script>
export default {
  name: 'App',
  components: {
  },
  computed: {
      currentCode() { 
        return require('!!text-loader!' + '../App')
        // the format is require('!!text-loader!'+'relative path')
      },
    },
}
</script>

The important thing，I suggest that you use the File path. Even it is a small amount of code.

demo quickly start to try vue3-highlight

📚 API

<hg-code> <drag-code>

Highlight.js code block.

🔰 suffix

Type: String

File suffix type

tag

Type: String

Relative path of the file

if you use code,the suffix and tag will be ignore

🔰 :code

code

Type: String

Highlight code

you can use the You can pass in the code in the form of text loader

result

that is same as the drag-code,but it only has the code,No drag

<drag-code>