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

发布于 2019-11-05 19:38:30 字数 4415 浏览 1617 评论 0

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

介绍

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]，将输入空格代码。
多实例支持 » 你可以在一个页面添加多个 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-off、autocomplete-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()