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

  • Z时代
  • 2024-01-10
  • 分类：IT

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-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()

待完成的功能

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)

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

相关链接

  • Github 地址：https://github.com/wenjiangs/CodePress

  • Sourceforge 地址：http://codepress.sourceforge.net

以上是 CodePress 基于 JavaScript 语法高亮编辑器插件 的全部内容， 来源链接： utcz.com/p/232300.html

回到顶部