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 ...
随机推荐
- cordova的android notify消息通知插件
最近在学习用CORDOVA(PHONEGAP)结合SENCHA TOUCH开发应用,想实现一个安卓下的消息通知功能,这个可以通过CORDOVA的插件来实现. 插件目录结构如下: notifyplugi ...
- html5调用手机摄像头,实现拍照上传功能
今天做手机网站,想实现手机扫描二维码功能.首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析. 首先实现在浏览器中调用摄像头,当然用现在 ...
- css样式表:样式分类,选择器。样式属性,格式与布局
样式表分类: 1.内联样式表, 和html联合显示,例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独 ...
- hdu Robberies
这道题目应该在理解上会有一点问题.这道题的概率不是用来加的,而是用来乘的.这道题要的是在能逃跑的前提下,获得的最大money,而题目中给的概率是被抓的概率,所以要先有一个预处理,之后只要列出状态转移方 ...
- hdu Oil Deposits
因为这道题中给的数据比较小,所以可以直接用枚举的方式进行dfs搜索,每出现一个‘@’,就进行一次dfs的搜索,将所有相邻的‘@’全部变成‘*’. #include"iostream" ...
- 外部dtd
引用外部dtd的语法:<!DOCTYPE 根元素 SYSTEM “DTD文档路径”> PUBLIC:公用 SYSTEM:私有 一个xml文件: 引入一个dtd文件(注意文件的后缀是dtd)
- 用户提交的cookie提交时为什么传不到服务器
cookie与session跨域登陆代码(ie6,ie7,firefox)frameset里面,也就是里面的frame是来自第三方站点(不同ip或不同域名),那么默认情况下ie会自动禁用这些站点的co ...
- 1215课后练习----indexOf的用法
package com.hanqi; public class Testco { public static void main(String[] args) { String str1 = &quo ...
- 批量硬关联本地AD帐号与Office云端帐号
世纪互联给的方案, 说只能一个一个做硬匹配, 把我吓尿了. 我整个简单的, 还能批量做. 1. 将本地域中所有用户的这两个属性导出. Get-ADUser -Filter * -SearchBase ...
- Repair duplicate IDs on cloned Endpoint Protection 12.1 clients
https://support.symantec.com/en_US/article.TECH163349.html