华丽的网上突出代码组件CodeMirror

农民之间的代码懒惰性质:愚公绝不能过夜。一劳永逸永远不知疲倦!这是一个代码示例 动态配置,在不同的场景抽象为常见的配置逻辑加,这使得有可能“为一个全球性的代码。代码做搬运工”,更糟糕的是特殊的代码已经成为一个动态负载(让我们用Groovy, Clojure做动态负载)。置动态代码时,总得把代码上传到server。假设代码是通过贴到上传页面的话。Textarea里的代码可没有IDE下那么婀娜多姿。要想好看就得想办法!

在线代码高亮组件 正在灯火阑珊处....

在线代码高亮组件有非常多,特别是Wordpress朋友圈的,纯js也有,CodeMirror就是当中一枚。

CodeMirror是一个提供多功能。多语言的在线代码高亮编辑组件。

简单的几行javascript 就能达到IDE的效果.

 var javaEditor = CodeMirror.fromTextArea(document.getElementById("java-code"), {
        lineNumbers: true,
        matchBrackets: true,
        mode: "text/x-java"
      });

仅仅要在html的页面有一个id为java-code的textarea。再加上面的代码就能有以下的效果:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdG9iZXJvYw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" >

这家伙眼下支持60种不同的语言代码高亮,高大上~~~

CodeMirror是开源的。全部的源代码跟样例在放在Github上面,任君取用!

门牌号是: https://github.com/marijnh/codemirror

版权声明:本文博主原创文章。博客,未经同意不得转载。

时间: 2024-08-28 16:54:03

华丽的网上突出代码组件CodeMirror的相关文章

华丽丽的在线代码高亮组件CodeMirror

偷懒为码农天性之一:能一蹴而就的决不愚公移山,能一劳永逸的决不孜孜不倦!其中一个代码实例就是 动态配置,将不同的场景抽象成通用逻辑加配置,这样就可以"一处代码供全球,不做代码搬运工",更有甚者是把特殊的代码也变成是动态加载(比如用Groovy, Clojure去做动态加载).当配置动态代码时,总得把代码上传到服务器,如果代码是通过贴到上传页面的话,Textarea里的代码可没有IDE下那么婀娜多姿,要想好看就得想办法!在线代码高亮组件 正在灯火阑珊处.... 在线代码高亮组件有很多,特

UVA 10603 Fill(正确代码尽管非常搓,网上很多代码都不能AC)

题目链接:option=com_onlinejudge&Itemid=8&page=show_problem&problem=1544">click here~ 此题我预计是加强过数据,在我纠结了非常久的时候我交了好几份网上的代码不是WA就是TLE.在我非常迷茫的时候我又交了一份,AC了(尽管我用随机数据找到了他代码一个不能过的数据). 给了我信心.然后我拿他的代码用随机数跟我的代码进行測试.再用FC找不同..发现了一个致命的错误.一般来说,BFS或者DFS都是须要

UVA 10603 Fill(正确代码虽然很搓,网上许多代码都不能AC)

在做用户查找时 因为要把查找的结果动态加载和显示,所以,那些html元素要由Ajax动态生成.用户打开查找界面时,有系统推荐的用户,而当用户按条件查找后,查找的结果动态加载和显示.所以考虑到用js来搞. 这个for循环就是移除已有的表单.然后根据Ajax请求过来的数据,动态生成新的表单对象.一定要注意j变量从大往小循环,否则,删除div元素后会引起serchResultLenth=serchResult.children.length;长度的变化(这个问题摸索了好久,才搞定,切记) for(va

在线代码编辑器CodeMirror简介

1.什么是Code Mirror 最近做一个项目需要在网页上实现一个代码编辑器,支持语法高亮.自动缩进.智能提示等功能.发现Code Mirror刚好满足所有需求.Code Mirror是由js写的一款插件,其功能非常强大,用来实现网页端代码编辑器非常方便.如果想看效果图,可移步到这里----CodeOnline,这是我做的一个小项目,其中代码编辑器的就是用Code Mirror实现的. 2.使用Code Mirror 下面我将演示如何使用Code Mirror搭建一个简易的代码编辑器,并对其常

在线代码编辑器 CODEMIRROR 配置说明

转自:http://www.hyjiacan.com/codemirror-config/ CodeMirror是一款在线的支持语法高亮的代码编辑器.官网: http://codemirror.net/ 下载后,解压开得到的文件夹中,lib下是放的是核心库和核心css,mode下放的是各种支持语言的语法定义,theme目录下是支持的主题样式.一般在开发中,添加lib下的引用和mode下的引用就够了. 使用示例 首先,要引用是 lib 目录下的 codemirror.js,还有一个就是同目录下的c

在线代码编辑器---codemirror插件

1.管网地址: http://codemirror.net/ 2.插件调用方法: 3.常用事件 1.onChange(instance,changeObj):codeMirror文本被修改后触发. instance是一个当前的codemirror对象,changeObj是一个{from,to,text[,removed][,origin]}对象.其中from,to分别表示起始行对象和结束行对象,行对象包括ch:改变位置距离行头的间隔字符,line:改变的行数.text是一个字符串数组表示被修改的

iOS代码组件化--利用cocoaPods创建私有库

如果项目模块多,模块间逻辑复杂,我们发现多个人同时维护一个代码仓库需要十分小心,一不小心,造成冲突,解决起来很烦,相信很多人都遇到手工删除合并的冲突的文件的经历. 如果利用组件化思想,每个人维护自己的模块对应的代码库,将会大大降低冲突的风险,而且组件化能够很好的给工程解耦. 组件化的第一步就是创建自己的仓库,公司的话需要搭建并维护私有库. 1.查看本地索引库 我们用cocoaPods 的时候,默认使用的是cocoaPods自带的索引库 终端中使用命令 $ pod repo 查看有哪些索引库,这里

微信小程序搜索框代码组件

search.wxml <view class="header"> <view class="search"> <icon type="search" size="18" color=""> </icon> <input type="text" confirm-type="search" bindconfirm=&

jQuery返回顶部代码组件

非原创,拿来修改,样式可自定义,div,img都可以,效果如下: 下载地址:http://files.cnblogs.com/files/EasonJim/jquery.topback.rar