使用需引入工具
CodeMirror是基于JavaScript设计的一款文本编纂器,供给丰富的api,具有实时在线代码编纂、代码高亮显示、代码自动补全等多种成果,撑持C、C++、C#、Java等多种编程语言。
二、下载
https://codemirror.net/codemirror.zip
三、示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="./lib/codemirror.css"> <link rel="stylesheet" href="theme/monokai.css"> <style> .CodeMirror { border: 1px solid black; font-size: 13px } </style> </head> <body> <textarea id="code" name="code"> function findSequence(goal) { function find(start, history) { if (start == goal) return history; else if (start > goal) return null; else return find(start + 5, "(" + history + " + 5)") || find(start * 3, "(" + history + " * 3)"); } return find(1, "1"); } </textarea> </body> <script src="lib/codemirror.js"></script> <script src="addon/edit/matchbrackets.js"></script> <script src="addon/selection/active-line.js"></script> <script src="keymap/sublime.js"></script> <script src="mode/javascript/javascript.js"></script> <script> let editor = CodeMirror.fromTextArea(document.getElementById("code"), { mode: ‘javascript‘, //设置编译器编程语言关联内容,需要引入mode/javascript/javascript.js lineNumbers: true, //显示行号 smartIndent: true, //自动缩进是否开启 indentUnit: 4, //缩进单位 theme: ‘monokai‘, //设置主题 styleActiveLine: true, //设置光标地址行高亮,需要引入addon/selection/active-line.js keyMap: ‘sublime‘, // 快捷键,default使用默认快捷键,除此之外包孕emacs,sublime,vim快捷键,使用需引入工具,keymap/sublime.js extraKeys: {‘Ctrl-Q‘: ‘autocomplete‘}, //设置快捷键 }); </script> </html>
四、说明
初始化编译器时可设置属性:
value:初始内容
Mode:设置编译器编程语言关联内容,对应的mine值
Theme:编译器的主题,需要引入对应的包
tabSize:tab的空格宽度
lineNumbers:是否使用行号
smartIndent:自动缩进是否开启
indentUnit:缩进单位
keyMap:快捷键,default使用默认快捷键,除此之外包孕emacs,sublime,vim快捷键,使用需引入工具
extraKeys 快捷键,例如 {“Ctrl-Q”: “autocomplete”}:自动补全使用需要引入工具:
extraKeys的快捷键绑定命令:
selectAllCtrl-A :选择编纂器的全部内容。
killLine:Emacs式的断根行。用于删除行内光标后的内容。如果只包罗空白字符,行尾的新行(应该是指换行 字符)也会被删除。
deleteLine :删除光标地址整行,包孕行尾的新行。
delLineLeft:删除行内光标前的内容。
温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/31968.html