import { codemirror } from 'vue-codemirror'
import 'codemirror/theme/blackboard.css'
import 'codemirror/lib/codemirror.css'
// language js
import 'codemirror/mode/javascript/javascript.js'
// theme css
// import 'codemirror/theme/base16-dark.css'
// import "codemirror/addon/hint/show-hint.css";
// import 'codemirror/addon/fold/xml-fold.js';
// import 'codemirror/addon/fold/indent-fold.js';
// import 'codemirror/addon/fold/markdown-fold.js';
// 折叠
// import 'codemirror/addon/fold/foldgutter.css'
// import 'codemirror/addon/fold/foldcode'
// import 'codemirror/addon/fold/foldgutter'
// import 'codemirror/addon/fold/brace-fold'
// import 'codemirror/addon/fold/comment-fold'
data() {
code: '',
cmOptions: {
// value: '',
mode: 'text/javascript',
// mode: "application/json",
theme: 'blackboard light',
// theme: "solarized light",
// theme: "base16-light",
readOnly: true,
lineNumbers: true, // 是否显示行号
lineWrapping: true, // 是否应滚动或换行以显示长行
extraKeys: { Ctrl: 'autocomplete' },
autocorrect: true,
lineWiseCopyCut: true, // 在没有选择的情况下进行复制或剪切将复制或剪切有光标的整行。
showCursorWhenSelecting: true, // 选择处于活动状态时是否应绘制光标
maxHighlightLength: Infinity, // 显示长行的时候 这个值是不限制,如果要做限制的话,值是number类型
matchBrackets: true, // 光标匹配括号
foldGutter: true,
autoCloseTags: true,
matchTags: { bothTags: true },
styleActiveLine: true,
smartIndent: true,
gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
},
}
components: {
codemirror,
},
<codemirror ref="executeCode" :value="code" :options="cmOptions" class="code"> </codemirror>