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

偷懒为码农天性之一：能一蹴而就的决不愚公移山，能一劳永逸的决不孜孜不倦！其中一个代码实例就是 动态配置，将不同的场景抽象成通用逻辑加配置，这样就可以“一处代码供全球，不做代码搬运工”，更有甚者是把特殊的代码也变成是动态加载（比如用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

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

时间： 2024-08-05 10:53:06

华丽丽的在线代码高亮组件CodeMirror的相关文章

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

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

[转]7个高性能JavaScript代码高亮插件

对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染任何一种编程语言,包括一些关键字的着色,以及每行代码的缩进等.今天我们要来分享一些高性能的JavaScript代码高亮插件,这些JavaScript代码高亮插件将非常有效地帮你实现在网页上的代码编辑和展示. 1.SyntaxHighlighter – 最优秀的JavaScript代码高亮插件 SyntaxHighlighter 是一款完全基于JavaScript的代码高亮插件,Sy

7个高性能JavaScript代码高亮插件

本文由码农网 – 小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染任何一种编程语言,包括一些关键字的着色,以及每行代码的缩进等.今天我们要来分享一些高性能的JavaScript代码高亮插件,这些JavaScript代码高亮插件将非常有效地帮你实现在网页上的代码编辑和展示. 1.SyntaxHighlighter – 最优秀的JavaScript代码高亮插件 Syn

在线代码编辑器CodeMirror简介

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

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

CodeMirror是一个用于编辑器文本框textarea代码高亮javascript插件,为各种编程语言实现关键字,函数,变量等代码高亮显示,丰富的api和可扩展功能以及多个主题样式,能满足您各种项目的需求. 最近项目中要求把得到的后端json数据如下图展示给客户,还需要可编辑的功能,于是就用到了CodeMirror这款插件,经过初步的探索,发现它主题样式非常靓丽,简单美观,效果图如下: 下面我就一步一步说明我的使用过程. 1.首先需要下载codemirror插件,先创建文件夹,下载插件 np

百度在线编辑器 代码高亮

原文:http://www.upwqy.com/details/28.html 使用百度在线编辑器 ,添加的内容,在前台显示的时候 代码部分只是重点突出了.但是没有代码高亮 想要使其代码高亮. 首先加载 文件 这里是在TP5中 {js href="/static/ue/third-party/SyntaxHighlighter/shCore.js"} {css href="/static/ue/third-party/SyntaxHighlighter/shCoreDefau

微信小程序的HTML和Markdown格式的富文本渲染组件html2wxml，支持代码高亮

之前微信小程序的富文本渲染组件用的wxParse,对普通富文本确实可以,但是对于代码格式pre标签则无法使用. 下面这个html2wxml很不错,可以支持代码高亮. 详细文档:https://github.com/qwqoffice/html2wxml 原文地址:https://www.cnblogs.com/goloving/p/10558503.html

20个最强的基于浏览器的在线代码编辑器

20个最强的基于浏览器的在线代码编辑器,你听过或者用过吗? 1. Compilr Compilr是一个在线编译器和在线IDE.可以用它来开发PHP, C, C++, Ruby.在浏览器中编译Java, C# 和 VB.net等. 马上使用 2. Dabblet 跨浏览器兼容,对前端攻城师们来说是一个不得不处理的问题.为了在浏览器间呈现统一的显示效果,攻城师们不仅要为每个游览器添加CSS前缀,甚至还需要用到一些特殊的CSS Hack技巧.于是,jsFiddle.JSBin等前端代码的在线测试工具应

Python Special Syntax 8: 序列化与反序列化-->华丽丽的叫 pickle（泡菜？！）

直接上代码吧 #-*-coding:utf-8 import os if os.path.exists('d:\\cpickle.data'): os.remove('d:\\cpickle.data') import cPickle as P shoplist=['apple','banana','pear'] P.dump(shoplist,file('d:\\cpickle.data','w')) f=file('d:\\cpickle.data') while True: content