vue.js - vue3怎么封装一个显示代码的组件？

Question

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

Answer 1

直接上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

Answer 2

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

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

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

Answer 3

为了在 Vue3 中创建一个显示代码的组件，你可以按照以下步骤进行操作：

1. 首先，创建一个名为 CodeDisplay.vue 的新文件，并在其中添加以下模板代码：

<template>  <div class="code-display"> {  name: 'CodeDisplay',  props: {    code: {      type: String,      required: true,    },  },};</script>

这将创建一个名为 CodeDisplay 的 Vue 组件，它接受一个名为 code 的属性，该属性的类型必须是字符串，并且是必需的。该组件将使用 pre 和 code 标签来显示传递给它的代码。

3. 在 CodeDisplay.vue 文件的 <style> 部分中添加以下样式代码：

<style scoped>.code-display {  background-color: #f0f0f0;  padding: 10px;  border-radius: 4px;}</style>

这将为 code-display 容器添加一些基本的样式，使其具有灰色背景、一些内边距和圆角边框。

现在，你可以在其他 Vue 组件中使用这个 CodeDisplay 组件来显示代码。例如，如果你想在一个名为 App.vue 的根组件中使用 CodeDisplay 组件，可以按照以下方式进行操作：

1. 在 App.vue 文件的 <template> 部分中添加以下代码：

<template>  <div id="app">    <CodeDisplay :code="myCode" />  </div></template>