CodeMIrror 简单使用

时间：2022-01-23 19:42:05

代码高亮是程序员的刚需，不管是在笔记类，论坛类，博客类web网站中，都对代码高亮提出要求，不高亮的代码阅读体验很差，codeMirror是一个前端代码高亮库，使用方便。

codeMirror可以直接在官网下载：http://codemirror.net/

下载文件中，我们需要的是 lib 下的 codemirror.js 和 codemirror.css ，这两个是必备的，其他 theme(主题)，mode(高亮模式)按需定制。
比如说你要高亮一段xml，你就需要用到mode/xml/xml.js.
除此之外，demo是最好的案例，基本上都可以copy过来自己改一改，doc是一些文档，不过都是英文的，我也没细看。keymap里面可以定制一些代码编辑的快捷键……
 
使用入门：
建立一个html文件，head中引入下列文件，此处我需要高亮xml，所以我引入了这个xml.js；
<link rel="stylesheet" href="lib/codemirror.css"/>

<script type="text/javascript" src="lib/codemirror.js"></script>

<script type="text/javascript" src="mode/xml/xml.js"></script>

在html中给一个textarea：

<textarea id="code" name="code" style="display: none"></textarea>

一般使用代码高亮都是用在文档内部，这里虽然给了个textarea，但是这里并不是把code直接显示在textarea中，而是生成了一个div，内部定义了行号，代码内容和滚动条等信息。

CodeMIrror 简单使用

调用方法

editor_req = CodeMirror.fromTextArea(document.getElementById("code"), {

        mode: "xml",

        lineNumbers: true,

        scrollbarStyle: null

 });
这里scrollbarStyle 是滚动条设置，我设置为null，是因为在使用中出现了个诡异的双层滚动条的错误！
后来发现是我codeMirror宽度设置的问题，这里的scrollbarStyle 还是要按需定制。
.CodeMirror-scroll {

            overflow: auto;

            height: 360px;

            width: 860px;

 }

　CodeMIrror 简单使用

以上，就是初步的使用，如果有复杂需求，建议直接看源码。

 

相关文章