vue 如何使用 element-ui 展示代码

你可以使用 <el-code> 组件来展示代码，它是 Element UI 中专门用来展示代码的组件。具体使用方法如下：

1. 首先需要在页面中引入 Element UI 和 Prism.js：

<!-- 引入 Element UI -->
<link rel="stylesheet" href="//unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>

<!-- 引入 Prism.js -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"></script>

2. 在组件中使用 <el-code> 组件来展示代码：

<template>
  <el-code language="html" :code="code"></el-code>
</template>

<script>
export default {
  data() {
    return {
      code: '<div>Hello, World!</div>'
    }
  }
}
</script>

在上面的示例中，我们使用了 <el-code> 组件来展示一段 HTML 代码，并将代码存储在组件的 data 中。你可以根据需要将代码存储在 data 中，然后将其传递给 <el-code> 组件的 :code 属性。

3. 为 <el-code> 组件添加 Prism.js 支持：

<template>
  <el-code language="html" :code="code" ref="code"></el-code>
</template>

<script>
export default {
  data() {
    return {
      code: '<div>Hello, World!</div>'
    }
  },
  mounted() {
    Prism.highlightAllUnder(this.$refs.code.$el)
  }
}
</script>

在上面的示例中，我们在组件的 mounted 钩子函数中使用 Prism.js 的 highlightAllUnder 方法为 <el-code> 组件添加语法高亮支持。需要注意的是，我们需要先使用 $refs 获取到 <el-code> 组件的实例，然后再使用其 $el 属性获取到实际的 DOM 元素，最后将其传递给 highlightAllUnder 方法即可。

希望以上内容能对你有所帮助！