CodeMirror中文说明文档

文档大纲

本文档并未完全翻译完成,我需要你的帮助。前往GitHub编辑

自定义样式

可以修改样式文件来调整 CodeMirror 的外观。
Mode 提供的样式文件只定义了该 Mode 的颜色,可直接修改。
编辑器的外观可以直接修改或覆盖 lib/codemirror.css 来调整。

修改该文件需要注意一些规则,如应使用安全色等,该文件需要包含以下 class :

CodeMirror
编辑器的父级元素,一般用来设置编辑器的宽、高、边框和定位。
也可以用来设置编辑器内元素的通用样式(如字体类型、字体大小、背景等)。
设置 heightauto 可以让编辑器自适应高度 (推荐把 viewportMargin 选项设置为 Infinity 配合使用)。
CodeMirror-focused
编辑器失去焦点时,最顶层的元素使用该 class 。一般用来在编辑器失去焦点时隐藏光标、修改选区颜色。
CodeMirror-gutters
侧边栏最底层元素的 class 。一般用来设置侧边栏的背景,或为侧边栏增加右边框。
CodeMirror-linenumbers
用来设置行号侧边栏的背景或宽度。
CodeMirror-linenumber
用来设置行号侧边栏中具体的数字的样式。
该 class 不是 CodeMirror-linenumbers 的子级, 但会使用绝对定位将其覆盖在 CodeMirror-linenumbers 之上。
可以设置数字的对齐方式或数字的样式。
CodeMirror-lines
用来设置内容行的垂直内填充。
CodeMirror-cursor
光标是一个使用绝对定位的块元素,可以随意修改它的外观。
CodeMirror-selected
选区使用该 class 。
CodeMirror-matchingbracket, CodeMirror-nonmatchingbracket
用来设置匹配的(或不匹配的)的括号。

如果你为页面中的所有 divpre 都设置了样式(不推荐), 你必须定义规则来消除对 CodeMirror 的影响。

主题也是 CSS 文件,用来给关键字着色。参考 theme 目录下的文件。