<template>
  <codemirror ref="mycode" :value="curCode" :options="cmOptions" class="code" v-show="aaa">
  </codemirror>
</template>

<script>
import { codemirror } from 'vue-codemirror'
import "codemirror/theme/ambiance.css"; // 这里引入的是主题样式，根据设置的theme的主题引入，一定要引入！！
require("codemirror/mode/javascript/javascript"); // 这里引入的模式的js，根据设置的mode引入，一定要引入！！


export default {
  name: 'ExecuteAction',
  data() {
    return {
      curCode: '测试',
      cmOptions: {
        // autorefresh: true,
        // tabSize: 4,
        // mode: 'text/x-properties',
        // theme: 'ayu-mirage',
        // line: true,
        // viewportMargin: Infinity, //处理高度自适应时搭配使用
        // highlightDifferences: true,
        // autofocus: false,
        // indentUnit: 2,
        // smartIndent: true,
        // readOnly: true, // 只读
        // showCursorWhenSelecting: true,
        // firstLineNumber: 1
        lineNumbers: true, // 显示行号
        mode: 'text/x-yaml', // 语法model
        gutters: ['CodeMirror-lint-markers'], // 语法检查器
        theme: "ambiance",
        lint: true, // 开启语法检查
      }

    }

  },
  components: {
    codemirror
  },


}

</script>


<style scoped>
.information-box>>>.CodeMirror {
  font-family: monospace;
  height: 71vh;
  direction: ltr;
}
</style>
