national-motion-web/src/views/demo/codemirror/index.vue

<template>
  <div>
    <textarea ref="textarea">
白日依山尽，黄河入海流。
欲穷千里目，更上一层楼。
        </textarea
    >
  </div>
</template>

<script lang="ts">
  import { defineComponent, onMounted, ref, reactive } from 'vue';
  // 引入全局实例
  import _CodeMirror from 'codemirror';

  // 核心样式
  import 'codemirror/lib/codemirror.css';
  // 引入主题后还需要在 options 中指定主题才会生效
  import 'codemirror/theme/cobalt.css';

  // 需要引入具体的语法高亮库才会有对应的语法高亮效果
  // codemirror 官方其实支持通过 /addon/mode/loadmode.js 和 /mode/meta.js 来实现动态加载对应语法高亮库
  // 但 vue 貌似没有无法在实例初始化后再动态加载对应 JS ，所以此处才把对应的 JS 提前引入
  import 'codemirror/mode/javascript/javascript.js';
  import 'codemirror/mode/css/css.js';
  import 'codemirror/mode/xml/xml.js';
  import 'codemirror/mode/clike/clike.js';
  import 'codemirror/mode/markdown/markdown.js';
  import 'codemirror/mode/python/python.js';
  import 'codemirror/mode/r/r.js';
  import 'codemirror/mode/shell/shell.js';
  import 'codemirror/mode/sql/sql.js';
  import 'codemirror/mode/swift/swift.js';
  import 'codemirror/mode/vue/vue.js';
  // 尝试获取全局实例

  export default defineComponent({
    components: {},
    setup() {
      const CodeMirror = window.CodeMirror || _CodeMirror;

      const textarea = ref(null);
      const options = reactive({
        // 缩进格式
        tabSize: 2,
        // 主题，对应主题库 JS 需要提前引入
        theme: 'cobalt',
        // 显示行号
        lineNumbers: true,
        line: true,
      });
      onMounted(() => {
        init();
      });

      function init() {
        CodeMirror.fromTextArea(textarea.value, options);
      }

      return {
        textarea,
      };
    },
  });
</script>

<style lang="css" scoped></style>