Why Highlight. Js

• 190 languages and 97 styles
• Automatic speech detection
• Multi-language code is highlighted
• Can be used for the node. Js
• Applies to any tag
• Compatible with any JS framework

The installation

npm install highlight.js –save

use

Used in the main. Ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import hljs from 'highlight.js' // Import code highlighting file
import 'highlight.js/styles/monokai-sublime.css'  // Import code highlighting styles
const app = createApp(App)

// Define a code highlighting directive
app.directive('highlight'.function (el) {
    const blocks = el.querySelectorAll('pre code');
    blocks.forEach((block: any) = > {
        hljs.highlightBlock(block)
    })
})
app.use(store);
app.use(router);
app.mount('#app')

Copy the code

Used in vue files

   <! Use "V-highlight" for code blocks to be highlighted.
    <div v-highlight>
        <pre>
            <code>
            <! -- Highlight code block -->
            </code>
        </pre>
    </div>
Copy the code

Results show