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. 获取值

  • 相关阅读:
    python——简单的爬虫
    Python——文件读取与写入
    python—列表集合的交集并集差集
    python—turtle佩奇
    python——append用法
    python——列表平均数
    python回文数的判断
    python输入两个数字比较大小
    python———input()函数
    HTML---3
  • 原文地址:https://www.cnblogs.com/weihanli/p/codeMirrorHighLightPlug.html
Copyright © 2011-2022 走看看