vue3: 代码高亮 highlightjs

安装

npm i @highlightjs/vue-plugin

使用

import hljs from 'highlight.js/lib/core';
import css from 'highlight.js/lib/languages/css.js';
// @ts-ignore
import hljsVuePlugin from '@highlightjs/vue-plugin';

hljs.registerLanguage('css', css);

app.use(hljsVuePlugin);

组件内使用

  <template>
         <highlightjs
            language="css"
            :code="cssText"
          />
  </template>       
  import 'highlight.js/lib/common';
  import hljsVuePlugin from '@highlightjs/vue-plugin';
    export default defineComponent({
    name: 'ThemeSetting',
    components: {
      highlightjs: hljsVuePlugin.component,
    }
  )