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

来源：互联网发布：手机链接下载软件编辑：程序博客网时间：2024/05/28 15:32

偷懒为码农天性之一：能一蹴而就的决不愚公移山，能一劳永逸的决不孜孜不倦！其中一个代码实例就是动态配置，将不同的场景抽象成通用逻辑加配置，这样就可以“一处代码供全球，不做代码搬运工”，更有甚者是把特殊的代码也变成是动态加载（比如用Groovy， Clojure去做动态加载）。当配置动态代码时，总得把代码上传到服务器，如果代码是通过贴到上传页面的话，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，再加上面的代码就能有下面的效果：

这家伙目前支持60种不同的语言代码高亮，高大上~~~

CodeMirror是开源的，所有的源码跟例子在放在Github上面，任君取用！

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

0 0