首页 > 网站 > WEB开发 > 正文

使用CodeMirror实现代码高亮

2024-04-27 14:08:07
字体:
来源:转载
供稿:网友

使用CodeMirror实现代码高亮

使用CodeMirror实现代码高亮

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

CodeMirror简介:维基百科 ,官网,GitHub

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

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

  1. 将开发包导入项目

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

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

  2. 添加js、css文件引用

  3. 页面初始化

    html:

    js:

  4. 获取值


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表