致力于打造一个优秀的建站资源共享学习平台!

基于 Google Code Prettify的WordPress代码高亮插件—WP-googlecodeprettify

by 爱站窝
基于 Google Code Prettify的WordPress代码高亮插件—WP-googlecodeprettify

一个基于 Google Code Prettify 实现的WordPress代码高亮插件,在TinyMCE编辑器中提供了一个插入代码的按钮。在文本编辑器中,加入了pre-js,pre-css,pre-html 3个快捷按钮;

wordpress插件X WordPress代码高亮插件谷歌代码高亮插件Google Code Prettify wordpress

安装说明

下载""

下载地址见底部

安装启用

  1. 下载的安装包,解压,传到插件目录,/wp-content/plugins/;
  2. 在WordPress的后台管理页面中启用WP-googlecodeprettify;

使用说明

TinyMCE富文本编辑器下使用

插件会在TinyMCE编辑器的工具栏中自动插入一个插入代码的按钮(名称:Google Code Prettify)。 如图:

DCF4C61F-B524-4F71-8CE9-18E13BE2FEAB

点击这个按钮,弹出插入代码的对话框,如图:

3CDAF47C-2C34-4101-A309-3E1D3D7DF907

选择语言类型插入代码,点击 确定插入 ,就可以了。

文本模式编辑器中快捷标签的使用

文本编辑器中,加入了pre-js,pre-css,pre-html 3个快捷按钮,如图:

CEB25F25-57D9-4353-9EEB-E90E341B049C

  1. 选中文本编辑器中的代码,点击相应的按钮:会使用<pre class="prettyprint lang-js linenums:1">(按pre-js按钮)和</pre>将你选中的代码包裹起来;
  2. 不选中文本编辑器中的代码,直接点击相应的按钮:会在光标位置插入<pre class="prettyprint lang-js linenums:1">(按pre-js按钮)和</pre>;重新定位光标在这里两者中的行。

其他

本插件是基于Google Code Prettify实现的代码高亮。插件默认提供了htmlcssjs三种语言高亮的快捷按钮,如果你要高亮其他语言,可以在文本模式编辑器下通过lang-*CSS类指定的 语言文件扩展名 来手工修改语言类型。例如,下面是高亮js代码:

<pre class="prettyprint lang-js linenums:1">

修改为高亮php语言:

<pre class="prettyprint lang-php linenums:1">

在默认情况下支持的文件扩展名包括:bsh, c, cc, cpp, cs, csh, cyc, cv, htm, html,java, js, m,mxml, perl, pl, pm, py, rb, sh,xhtml, xml, xsl

也就是说,Google Code Prettify支持高亮的语言:C, Java, Python, Bash, HTML, XML, Javascript,Makefiles, Ruby, PHP, Awk, Perl, Basic, Clojure, CSS, Dart, Erlang, Go, Haskell, Lisp, Scheme,LLVM, Lua, Matlab, Pascal, R, Scala, SQL, LaTeX等语言。

Google Code Prettify的官方说明和使用说明:http://google-code-prettify.googlecode.com/svn/trunk/README.html

主题风格

本插件默认提供的主题非常漂亮,你可以根据你自己的需要修改主题风格。只要修改插件目录下/js/prettify.css CSS文件就可以了,修改完成后上传覆盖就好了。

Google Code Prettify 官方提供了5套主题:http://google-code-prettify.googlecode.com/svn/trunk/styles/index.html

还有GitHub几套更加漂亮的主题:http://jmblog.github.io/color-themes-for-google-code-prettify/

你可以拷贝过来直接使用。

修改本插件

本插件默认只提供了htmlcssjs三种语言高亮,这对于高亮其他语言很不方便。如果本插件将全部语言放出来,那么选择项太多,查找也不方便。

所以,你可以根据自身的需求修改本插件支持其他语言的高亮:

  1. TinyMCE富文本编辑器下,你可以修改 window.php 文件中ID为 wpgcp_langselect 控件,修改、增加、删除相应的 option 即可;
  2. 文本模式编辑器下,修改对应的"QuickTags"按钮就可以了,在wp-wpgcp-quicktag.js下,怎么修改?你自己看代码吧。

改进完善

本插件还有很多不尽如人意地方,就是上面所说的那样,其他语言高亮还需要用户自己手工修改。 由于本人PHP水平太差,对WordPress的插件机制又不熟悉,所以改进计划一直搁置。如果你有兴趣,欢迎你帮大家做个插件选项页面,主要是可以设置常用语言,等等。欢迎pull或微博上@愚人码头 ,感激万分。

其他说明

  1. 本插件对Google Code Prettify 源代码做了个小修改,插件目录下 /js/prettify.js 文件最后加了一条初始化prettyPrint的语句。
  2. Google Code Prettify的官方说明和使用说明:http://google-code-prettify.googlecode.com/svn/trunk/README.html

全部评论: 0

我们的优势当前为最新版本,木有更新记录哦!
在线咨询
有什么可以帮到你
点击咨询

账号登录

忘记密码

第三方账号快速登录

Q Q 登 录 微 博 登 录

账号注册 已经有账号? 立即登录

发送验证码

第三方账号快速注册

Q Q 登 录 微 博 登 录