vue3怎么封装一个显示代码的组件？

  • Z时代
  • 2024-03-09
  • 分类：IT

vue3怎么封装一个显示代码的组件？

回答：

可以这样实现丐版的代码显示：

<script setup>
const props = defineProps({
  code: String
});
</script>
<template>
<pre>
  <code>{{ code }}</code>
</code>
</template>

这样的组件可以用来显示代码，不过不会自动高亮代码，高亮代码其实是一件非常繁琐的事情，哪怕只是匹配关键词也相当繁琐，建议使用成熟的开源方案。不过咱也没用 Vue 做过代码高亮，可以 github 搜一下。

回答：

直接上highlight.js，有现成的组件了:
下载 highlightjs/vue-plugin，这是用 highlight.js 封装好的 vue 插件:

<template>
  <highlightjs
    language="js"
    code="console.log('Hello World');"
  />
</template>
<script>
import 'highlight.js/lib/common';
import hljsVuePlugin from "@highlightjs/vue-plugin";
export default {
  components: {
    highlightjs: hljsVuePlugin.component
  }
}
</script>

具体参照官网示例就可以:
https://www.fenxianglu.cn/highlightjs/docs/start

以上是 vue3怎么封装一个显示代码的组件？ 的全部内容， 来源链接： utcz.com/p/935158.html

回到顶部