Vue 3 directive for highlight.js
yarn add @point-hub/vue-highlight or npm install @point-hub/vue-highlight --save Import plugin in your main.js file
import Highlight from "@point-hub/vue-highlight"; import "highlight.js/styles/atom-one-dark.css"; // Import Languages import javascript from "highlight.js/lib/languages/javascript"; import html from "highlight.js/lib/languages/xml"; // Register Language Highlight.registerLanguage("html", html); Highlight.registerLanguage("javascript", javascript); const app = createApp(App); app.use(Highlight.plugin); app.mount("#app"); And use it into your view
<pre> <code v-highlight class="javascript"> function say(text) { alert(text) } say('Hello') </code> </pre>