code-editor代码编辑

代码编辑器-Codemirror

这个是vue3基于Codemirror@5封装的。

官网：https://rennzhang.github.io/codemirror-editor-vue3/zh-CN/

代码展示-prismjs

官网：https://prismjs.com/plugins/line-numbers/

这个框架非常的简单好用，但是只能作为展示使用。

yarn add prismjs

页面显示

<template>
  <pre><code class="language-js">{{ code }}</code></pre>
</template>

<script>
import Prism from 'prismjs';
import 'prismjs/themes/prism.css';

export default {
  data() {
    return {
      code: `function helloWorld() {
              console.log('Hello, world!');
            }`
    };
  },
  mounted() {
    Prism.highlightAll();
  }
};
</script>