CodeMIrror 简单使用
代码高亮是程序员的刚需,不管是在笔记类,论坛类,博客类web网站中,都对代码高亮提出要求,不高亮的代码阅读体验很差,codeMirror是一个前端代码高亮库,使用方便。
codeMirror可以直接在官网下载:http://codemirror.net/
<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
});
.CodeMirror-scroll {
overflow: auto;
height: 360px;
width: 860px;
}
以上,就是初步的使用,如果有复杂需求,建议直接看源码。
CodeMIrror 简单使用的更多相关文章
- CodeMirror编辑器文本框Textarea代码高亮插件,CodeMirror的简单实用例子
CodeMirror是一个用于编辑器文本框textarea代码高亮javascript插件,为各种编程语言实现关键字,函数,变量等代码高亮显示,丰富的api和可扩展功能以及多个主题样式,能满足您各种项 ...
- codeMirror的简单使用,js比较文本差异(标注出增删改)
最近项目需要使用比较文本的差异的功能,在同事的推荐下,使用js脚本来比较,所以codeMirror变成了选择. 当然codeMirror中有其他功能,比较文本差异的只是其中一个功能,本人不在此做介绍, ...
- CodeMirror简介
Javascript由于其作为Web标准的独特地位,很多人甚至希望它能一统前后端开发. Javascript的本质工作首先肯定的Web前端开发,本文主要想介绍的CodeMirror是一款Web Edi ...
- 在线代码编辑器CodeMirror简介
1.什么是Code Mirror 最近做一个项目需要在网页上实现一个代码编辑器,支持语法高亮.自动缩进.智能提示等功能.发现Code Mirror刚好满足所有需求.Code Mirror是由js写的一 ...
- 开源框架】Android之史上最全最简单最有用的第三方开源库收集整理,有助于快速开发
[原][开源框架]Android之史上最全最简单最有用的第三方开源库收集整理,有助于快速开发,欢迎各位... 时间 2015-01-05 10:08:18 我是程序猿,我为自己代言 原文 http: ...
- codemirror和ace editor的语法高亮
两个javascript库用做在线代码编辑器都是非常优秀的选择 我这两天对这两个类库做了简单的研究,重点是语法高亮的自定义: ace editor的主要思路是生成状态机,从一个startstate开始 ...
- codemirror 插件
做在线词典编辑的时候.里面有些自定义标签.类似html标签一样. 为了让编辑编辑.改成了 <动词></动词> 所以引用了 codemirror插件 此插件绝对牛逼 它主要功能 ...
- 代码高亮插件Codemirror使用方法及下载
代码高亮插件Codemirror使用方法及下载 - 老男孩的日志 - 网易博客 代码高亮插件Codemirror使用方法及下载 2013-10-31 16:51:29| 分类: 默认分类 | ...
- 【开源框架】Android之史上最全最简单最有用的第三方开源库收集整理,有助于快速开发,欢迎各位网友补充完善
链接地址:http://www.tuicool.com/articles/jyA3MrU 时间 2015-01-05 10:08:18 我是程序猿,我为自己代言 原文 http://blog.cs ...
随机推荐
- Grunt配置文件编写技巧及示范
受益于grunt这么久,继续分享关于grunt的一些技巧.grunt确实是前端项目中不可或缺的提升效率的工具.第一次接触grunt是在去年7月份,开始有接触LESS.Coffee Script的等需要 ...
- 解决ibus图标为红圈(图标丢失)
修正IBUS图标丢失gconftool –type boolean -s /desktop/ibus/panel/show_icon_on_systray truegconftool –type bo ...
- 【wikioi】1295 N皇后问题
题目链接 算法:DFS 刚开始卡了我一下,我竟然傻到用二维来放皇后= =.导致一直TLE.... 其实用1维就行了的,下标为行(列),值为列(行) 我是用下标为列做的. 上代码 #include &l ...
- 【BZOJ】1059: [ZJOI2007]矩阵游戏(二分图匹配)
http://www.lydsy.com/JudgeOnline/problem.php?id=1059 本题可以看出,无论怎样变化,在同一行和同一列的数永远都不会分手---还是吐槽,,我第一眼yy了 ...
- MatLab GUI Use Command for Debug 界面调试的一些方法
在MatLab的GUI界面编程,我们在调试的时候需要打印出一些变量,那么介绍下我用到的两种调试方法: 第一种,使用弹出对话框来打印变量,要注意的是打印的东西必须是string类型的,所以其他类型的变量 ...
- mysql5.6安装
mysql5.6安装 #卸载原有的mysqlyum remove mysql*ls /etc/my.cnf*mv /etc/my.cnf* /tmp/ #安装依赖包yum install make c ...
- 大数据技术hadoop入门理论系列之二—HDFS架构简介
HDFS简单介绍 HDFS全称是Hadoop Distribute File System,是一个能运行在普通商用硬件上的分布式文件系统. 与其他分布式文件系统显著不同的特点是: HDFS是一个高容错 ...
- javascript获取随机rgb颜色和十六进制颜色的方法
<div id="console">在线交易平台的成功秘诀:从 Ebay 到 Yelp 到 Uber</div> <script type=" ...
- NBUT 1602 Mod Three(线段树单点更新区间查询)
[1602] Mod Three 时间限制: 5000 ms 内存限制: 65535 K 问题描述 Please help me to solve this problem, if so, Liang ...
- VS插件开发
参考资料: VS插件开发 - 个性化VS IDE编辑器 自己动手编写一个VS插件(一) VS Addin插件基本开发入门 VS Addin插件配置.部署