您现在的位置是:首页 > Javascript
当前栏目
js代码在线运行
2023-03-15 23:16:53 时间
本文教程操作环境:windows7系统、jquery3.2.1版本,DELL G3电脑。
在编程中,实现代码的在线功能是非常迫切的需求。在js中有这样一个编辑器,能够实现代码的在线高亮,很多人都忽略了它的存在。这个编辑器就是codemirror,如果使用过一些基础库的人,可能见过它的身影。下面我们就codemirror概念、用法,以及配置项的在线运行为大家展开讲解。
1.codemirror概念
codemirror 基于Javascript,短小精悍,实时在线代码高亮显示,它不是某个富文本编辑器的附属产品,它是许多大名鼎鼎的在线代码编辑器的基础库。
2.codemirror用法
var editor = CodeMirror.fromTextArea(document.getElementById("htmlEdit"), { lineNumbers: false, mode: "htmlmixed", indentUnit: 2, lineWrapping:true, styleActiveLine: true });
3.codemirror配置项
cmOptions: { // codemirror config flattenSpans: false, // 默认情况下,CodeMirror会将使用相同class的两个span合并成一个。通过设置此项为false禁用此功能 tabSize: 2, // tab缩进空格数 mode: '', // 模式 theme: 'monokai', // 主题 smartIndent: true, // 是否智能缩进 lineNumbers: true, // 显示行号 matchBrackets: true, // 匹配符号 lineWiseCopyCut: true, // 如果在复制或剪切时没有选择文本,那么就会自动操作光标所在的整行 indentWithTabs: true, // 在缩进时,是否需要把 n*tab宽度个空格替换成n个tab字符 electricChars: true, // 在输入可能改变当前的缩进时,是否重新缩进 indentUnit: 2, // 缩进单位,默认2 autoCloseTags: true, // 自动关闭标签 autoCloseBrackets: true, // 自动输入括弧 foldGutter: true, // 允许在行号位置折叠 cursorHeight: 1, // 光标高度 keyMap: 'sublime', // 快捷键集合 extraKeys: { 'Ctrl-Alt': 'autocomplete', 'Ctrl-Q': cm => { cm.foldCode(cm.getCursor()) } }, //智能提示 gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'], // 用来添加额外的gutter styleActiveLine: true // 激活当前行样式 },
以上就是js代码在线运行,我们可以使用codemirror编辑器的一些操作。有这类需求的人,可以尝试使用codemirror的一些基础用法。
相关文章
- 实用的运营工作方法论,让你掌握基础核心能力
- 关于现代包管理器的深度思考-为什么现在我更推荐 pnpm 而不是 npm/yarn?
- 面试官:JavaScript的数据类型你了解多少?
- 卸掉Electron!事实已证明,它也很牛!
- 一行 JavaScript 代码搞定这些操作!收藏了
- IntelliJ IDEA 还能画思维导图,果然最强 IDE
- 二分搜索树,你还要我怎样?
- 使用 React/Hooks 时需要注意过时的闭包!
- 使用 MASK 实现视频弹幕人物遮罩过滤
- 你应该会喜欢的5个自定义 Hook
- 天哪!几行js代码就可以实现拳皇小游戏
- 一篇文章带你了解SVG stroke属性
- Vue 3.0 进阶之动态组件探秘
- 聊一聊Vue学习之三
- JAVA 8 新特性实用总JAVA 8 新特性实用总结
- 为了背单词,我撸了一个插件,直接在VS code就能背
- 如何在 JS 中的数组开头添加元素?
- 对象到对象映射-AutoMapper
- 万万没想到,“红孩儿”竟然做了程序员,还是CTO!
- JavaScript 闭包实践