highlightjs-vue

import hljs from 'highlight.js'; // In a modern ESM project, you might need to import CJS modules like this: // import hljsDefineVue from 'highlightjs-vue'; // This might fail without bundler config // More robust way to import a CJS module in an ESM context if your bundler supports it // Or, if running in Node.js CJS environment: const hljsDefineVue = require('highlightjs-vue'); hljsDefineVue(hljs); // Register the 'vue' language definition const vueSfcCode = ` <template> <div class="container"> <h1>{{ message }}</h1> <button @click="increment">Click me!</button> <p>Count: {{ count }}</p> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; export default defineComponent({ name: 'HelloWorld', props: { msg: String, }, setup() { const count = ref(0); const message = 'Hello Vue 3!'; const increment = () => { count.value++; }; return { count, message, increment, }; }, }); </script> <style scoped lang="scss"> .container { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; h1 { color: #42b983; } } </style> `; const highlightedCode = hljs.highlight(vueSfcCode, { language: 'vue' }).value; console.log(highlightedCode); // You would typically insert 'highlightedCode' into an HTML element // for display in a browser or generate static HTML.