代码高亮是程序员的刚需,不管是在笔记类,论坛类,博客类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,内部定义了行号,代码内容和滚动条等信息。

调用方法

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 简单使用的更多相关文章

  1. CodeMirror编辑器文本框Textarea代码高亮插件,CodeMirror的简单实用例子

    CodeMirror是一个用于编辑器文本框textarea代码高亮javascript插件,为各种编程语言实现关键字,函数,变量等代码高亮显示,丰富的api和可扩展功能以及多个主题样式,能满足您各种项 ...

  2. codeMirror的简单使用,js比较文本差异(标注出增删改)

    最近项目需要使用比较文本的差异的功能,在同事的推荐下,使用js脚本来比较,所以codeMirror变成了选择. 当然codeMirror中有其他功能,比较文本差异的只是其中一个功能,本人不在此做介绍, ...

  3. CodeMirror简介

    Javascript由于其作为Web标准的独特地位,很多人甚至希望它能一统前后端开发. Javascript的本质工作首先肯定的Web前端开发,本文主要想介绍的CodeMirror是一款Web Edi ...

  4. 在线代码编辑器CodeMirror简介

    1.什么是Code Mirror 最近做一个项目需要在网页上实现一个代码编辑器,支持语法高亮.自动缩进.智能提示等功能.发现Code Mirror刚好满足所有需求.Code Mirror是由js写的一 ...

  5. 开源框架】Android之史上最全最简单最有用的第三方开源库收集整理,有助于快速开发

    [原][开源框架]Android之史上最全最简单最有用的第三方开源库收集整理,有助于快速开发,欢迎各位... 时间 2015-01-05 10:08:18 我是程序猿,我为自己代言 原文  http: ...

  6. codemirror和ace editor的语法高亮

    两个javascript库用做在线代码编辑器都是非常优秀的选择 我这两天对这两个类库做了简单的研究,重点是语法高亮的自定义: ace editor的主要思路是生成状态机,从一个startstate开始 ...

  7. codemirror 插件

    做在线词典编辑的时候.里面有些自定义标签.类似html标签一样. 为了让编辑编辑.改成了  <动词></动词> 所以引用了 codemirror插件 此插件绝对牛逼 它主要功能 ...

  8. 代码高亮插件Codemirror使用方法及下载

    代码高亮插件Codemirror使用方法及下载 - 老男孩的日志 - 网易博客 代码高亮插件Codemirror使用方法及下载   2013-10-31 16:51:29|  分类: 默认分类 |   ...

  9. 【开源框架】Android之史上最全最简单最有用的第三方开源库收集整理,有助于快速开发,欢迎各位网友补充完善

    链接地址:http://www.tuicool.com/articles/jyA3MrU 时间 2015-01-05 10:08:18  我是程序猿,我为自己代言 原文  http://blog.cs ...

随机推荐

  1. Grunt配置文件编写技巧及示范

    受益于grunt这么久,继续分享关于grunt的一些技巧.grunt确实是前端项目中不可或缺的提升效率的工具.第一次接触grunt是在去年7月份,开始有接触LESS.Coffee Script的等需要 ...

  2. 解决ibus图标为红圈(图标丢失)

    修正IBUS图标丢失gconftool –type boolean -s /desktop/ibus/panel/show_icon_on_systray truegconftool –type bo ...

  3. 【wikioi】1295 N皇后问题

    题目链接 算法:DFS 刚开始卡了我一下,我竟然傻到用二维来放皇后= =.导致一直TLE.... 其实用1维就行了的,下标为行(列),值为列(行) 我是用下标为列做的. 上代码 #include &l ...

  4. 【BZOJ】1059: [ZJOI2007]矩阵游戏(二分图匹配)

    http://www.lydsy.com/JudgeOnline/problem.php?id=1059 本题可以看出,无论怎样变化,在同一行和同一列的数永远都不会分手---还是吐槽,,我第一眼yy了 ...

  5. MatLab GUI Use Command for Debug 界面调试的一些方法

    在MatLab的GUI界面编程,我们在调试的时候需要打印出一些变量,那么介绍下我用到的两种调试方法: 第一种,使用弹出对话框来打印变量,要注意的是打印的东西必须是string类型的,所以其他类型的变量 ...

  6. mysql5.6安装

    mysql5.6安装 #卸载原有的mysqlyum remove mysql*ls /etc/my.cnf*mv /etc/my.cnf* /tmp/ #安装依赖包yum install make c ...

  7. 大数据技术hadoop入门理论系列之二—HDFS架构简介

    HDFS简单介绍 HDFS全称是Hadoop Distribute File System,是一个能运行在普通商用硬件上的分布式文件系统. 与其他分布式文件系统显著不同的特点是: HDFS是一个高容错 ...

  8. javascript获取随机rgb颜色和十六进制颜色的方法

    <div id="console">在线交易平台的成功秘诀:从 Ebay 到 Yelp 到 Uber</div> <script type=" ...

  9. NBUT 1602 Mod Three(线段树单点更新区间查询)

    [1602] Mod Three 时间限制: 5000 ms 内存限制: 65535 K 问题描述 Please help me to solve this problem, if so, Liang ...

  10. VS插件开发

    参考资料: VS插件开发 - 个性化VS IDE编辑器 自己动手编写一个VS插件(一) VS Addin插件基本开发入门 VS Addin插件配置.部署