CodePress 基于 JavaScript 语法高亮编辑器插件 - 文章教程

CodePress 基于 JavaScript 语法高亮编辑器插件

发布于 2019-11-05 字数 5314 浏览 1346 评论 0

CodePress 是一个完全用 Javascript 写成的 HTML Textarea 增强程序,利用它你只需要简单的修改,就可以将你网页中的 Textarea 变成一个支持语法高亮的程序编辑器。CodePress 完全开源,非常容易集成。

CodePress 基于 JavaScript 语法高亮编辑器插件

介绍

Codepress 是基于网络的源代码编辑器的语法高亮用 JavaScript 写的,颜色的文本在实时的时间输入浏览器。

CodePress 支持众多语言语法高亮,例如 PHP、JavaScript、Java、Perl 等等,而且作者还在陆续添加更多语言支持。我查看了 CodePress 的代码,良好的架构使得 CodePress 扩展新的语法高亮规则非常容易,如果你的项目需要一个特殊的语法的话(例如 Smarty),完全可以自己动手来制作一个。

CodePress 非常容易集成,具体安装方法可以看看作者的页面,这里就不重复了。高速、众多语法支持和便于集成使得它有很不错的应用前景,例如我们可以将其集成到 phpMyAdmin 的 SQL 输入界面中,或者集成到很多主机面板(例如 Cpanel)的 Web 文件管理程序中。有这样一个全功能的在线程序编辑器,我们在线上调试程序时绝对方便不少。

特点

你可以浏览这里查看示例,找到下面的一些特性。

  • 真正的实时代码高亮 » 仅仅输入一些代码
  • Code snippets » on PHP example type “if” and press [tab]
  • Auto completion » simple type ” or ( or ‘ or [ or { on any example below (except Plain Text)
  • Shortcuts » 在 PHP 示例中,按住 [ctrl][shift][space],将输入空格 &nbsp 代码。
  • 多实例支持 » 你可以在一个页面添加多个 CodePress 编辑器

WordPress 插件

CodePress 貌似已经推出一段时间了,甚至万能的 WordPress 已经有了利用 CodePress 制成的插件。安装这个插件后,WordPress 后台的 Theme Editor 编辑框将被 CodePress 代替。对于主题作者来说,这样修改主题实在太方便了。

使用方法

1、下载 CodePress 到你的电脑里面,解压下载的文件,上传到你的服务器中,保证一个域名可以访问,例如:http://yourserver/codepress/,CodePress 是纯 HTML 和 JavaScript 代码编辑器插件,所以不需要服务器做特别的处理即可使用。

2、将 CodePress 插件文件引入到你的网页中,建议在 <head> 标签中引入,如果你需要页面加载以后运行插件,你应该在最后一个 </body> 标签前面引入插件。

<script src="/codepress/codepress.js"></script>

3、添加 <textarea> 标签到你的网页中,Codepress会自动替换你的 <textarea> 标签为编辑器,其中的我们需要添加一些 Class 样式,具体代码如下所示。

<textarea id="myCpWindow" class="codepress javascript linenumbers-off">
  // your code here
</textarea>

上面的 Class 里面有三个样式,Codepress 会自动查找到这些样式,根据样式来渲染代码高亮编辑器,其中 javascript 表示这个编辑的代码类型,linenumbers-off 表示关闭行号,其它的样式如:linenumbers-offautocomplete-off 和 readonly-on

如果是需要多个代码高亮编辑器,我们建议不要给 <textarea> 设置ID,因为一个页面 ID 必须唯一,你可以通过 Class 样式来区分各个编辑器。

其它可选的 JavaScript 事件

  • Open/edit code from different places.
    Example 1: textarea_id.edit('other_textarea_id','language')
    Example 2: textarea_id.edit('h1 { color: red; }','css')
    Example 3: textarea_id.edit(document.getElementById('myCode').innerHTML,'html')
  • Get code from CodePress window.
    Example: textarea_id.getCode()
  • Turn on/off CodePress editor and return to the regular textarea.
    Example: textarea_id.toggleEditor()
  • Turn on/off line numbers.
    Example: textarea_id.toggleLineNumbers()
  • Turn on/off read only.
    Example: textarea_id.toggleReadOnly()
  • Turn on/off auto-complete.
    Example: textarea_id.toggleAutoComplete()

待完成的功能

You can suggest improvements and features through feature request page at SourceForge.

  • 动态语法高亮
  • 支持的语法高亮语言
    • C
    • C++
    • Python
    • Ruby
    • ASP
  • indentation
    • auto indent
    • soft tabs
    • block ident
  • plugin system
  • auto completion with code suggest
  • copy from CodePress and paste somewhere else on Internet Explorer
  • code folding
  • improve shortcut system
  • improve auto-complete system
  • browser compatibility (safari, opera)

如果你想帮助这个项目,你可以试着做一些上面的项目,我会把你的自定义代码直接放在你的代码(或你的代码的一部分),把你的名字写在“关于”页面。

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

伊面

文章 0 评论

白况

文章 0 评论

七禾

文章 0 评论

亢潮

文章 0 评论

悲念泪

文章 0 评论