zoukankan      html  css  js  c++  java
  • 使用CodeMirror在浏览器中实现编辑器的代码高亮效果

    使用CodeMirror在浏览器中实现编辑器的代码高亮效果

           在网站后台管理中希望能够对网站的样式表css与js文件以及模板html进行管理,在编辑的时候只是以普通文本展示又太普通,显得好难看,于是便在网上找能够实现代码高亮的插件,终于让我找到了codeMirror。

      先来看一下,codeMirror实现代码高亮的效果:

      

           

      浏览器支持状况:

      

    CodeMirror简介:维基百科官网GitHub

    codeMirror是基于JavaScript开发的能够实现代码高亮,支持N多种语言,而且有许多编程接口,甚至你可以开发自己的编程语言,并根据codeMirror的文档开发使自己代码高亮的插件。

        你可以从官网GitHub上下载到codeMirror的开发包以及使用文档。

    1. 将开发包导入项目

      下载并解压之后,可以看到如下文件结构(这是从github上下载下来的):

      有些文件在项目中是不需要的,我们只需要把必须的文件导入项目中即可,主要用到的文件有lib、mode、theme文件夹中的文件,mode中的文件也可以根据自己的实际项目需要进行进一步精简

    2. 添加js、css文件引用

    3. 页面初始化

      html:

      js:

    4. 获取值

  • 相关阅读:
    算法提高 约数个数
    算法提高 第二大整数
    算法提高 逆序排列
    算法提高 c++_ch02_01
    算法提高 日期计算
    程序员教你设置密码
    fzu 2184 逆序数还原
    fzu 2146 Easy Game
    算法训练 区间k大数查询
    算法训练 最大最小公倍数
  • 原文地址:https://www.cnblogs.com/weihanli/p/codeMirrorHighLightPlug.html
Copyright © 2011-2022 走看看