Javascript 如何在nuxt3上创建highlightjs插件

发布于08月31日

我try 在nuxt3中创建一个plugin，并在我的组件上使用它.但我做不到

我是这样做的:

// @/plugins/highlight.js

import 'highlight.js/styles/stackoverflow-light.css'
import hljs from 'highlight.js/lib/core';
import json from 'highlight.js/lib/languages/json';

hljs.registerLanguage('json', json);

import 'highlight.js/styles/vs.css'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(hljs)
})

我想这样使用:

// @/components/JSONView.vue
<template>
  <highlightjs
    language="json"
    :code="myCode"
   />
</template>

<script setup>

const code = ref('{ "done": true }')

</script>

提前谢谢你

推荐答案

你可以使用来自Highlight Js的官方Vue plugin

npm i @highlightjs/vue-plugin个

~/plugins/highlight.client.ts个

import hljs from 'highlight.js/lib/core'
import javascript from 'highlight.js/lib/languages/javascript'
import highlightJS from '@highlightjs/vue-plugin'
import 'highlight.js/styles/atom-one-dark.css'

export default defineNuxtPlugin((nuxtApp) => {
    hljs.registerLanguage('javascript', javascript)
    nuxtApp.vueApp.use(highlightJS)
})

组件用法

<script setup lang="ts">
const JSONEXample = JSON.stringify({ firstName: 'John', lastName: 'Wick', age: 37 }, null, 3)
</script>
<template>
  <main>
    <ClientOnly>
      <highlightjs
          autodetect
          :code="JSONEXample"
      />
    </ClientOnly>
  </main>
</template>

Tested and it works.