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

  • 相关阅读:
    git 镜像地址
    IntelliJ IDEA 2019 控制台中文乱码问题
    LINUX配置本地YUM源
    动态添加js的代码
    Java 多线程
    Java I/O系统
    Java 中的容器 Collection 和 Map
    Java 数组
    javaweb的四大作用域
    三层 转自http://git.oschina.net/tzhsweet/superui
  • 原文地址:https://www.cnblogs.com/weihanli/p/codeMirrorHighLightPlug.html
Copyright © 2011-2022 走看看