实现的WordPress代码高亮插件——WP-googlecodeprettify

作者 :
免费
  • 正文
  • 目 录

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

    GitHub 开源地址:https://github.com/feiwen8772/wp-googlecodeprettify

    代码高亮效果:https://www.html.cn/archives/4728

    更新信息

    2017年08月24日 v3.0 更新:

    • 新增显示文件名,显示文件名称时,不显示语言类型;文本编辑器中可以直接通过添加filename-加文件名的方式添加,例如:filename-index.html
    • 新增显示重点代码行,可以在prettify.css文件的.important 中自定义设置重点行样式,多行用英文逗号 “,” 隔开;文本编辑器中可以直接通过添加importlines:加重点行号的方式添加,例如:importlines:1,3,4 ;特别注意:行号从1 开始索引,不是0;
    • 重构了可视化编辑器插入代码的功能。

    2017年06月12日 v2.0 更新:

    • fix bug:WordPress更新,导致插件脚本报错。
    • 重构了可视化编辑器插入代码的功能。
    • 新增:代码复制到微信公众号文章中可以正常显示。


    2016年10月27日 更新:

    • 在代码区上面增加了语言类型名称,名称值读取的是 lang-后面的值。你可以在文本编辑器中设置为
      • lang-CSS,lang-HTML,lang-JavaScriptlang-ES6lang-ES5lang-ECMAScript6lang-js,等。如图:实现的WordPress代码高亮插件——WP-googlecodeprettify-完美源码
      • 增加了Sass 和 ECMAScript 6语法高亮。

      安装说明

      下载

      目前还没有发布到WordPress官网,请在此页面点击下载ZIP

      安装启用

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

      使用说明

      TinyMCE富文本编辑器下使用

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

      实现的WordPress代码高亮插件——WP-googlecodeprettify-完美源码

      点击这个按钮,弹出插入代码的对话框,如图:
      实现的WordPress代码高亮插件——WP-googlecodeprettify-完美源码

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

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

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

      实现的WordPress代码高亮插件——WP-googlecodeprettify-完美源码

      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">

      在默认情况下支持的文件扩展名包括:bshccccppcscshcyccvhtmhtml,javajsmmxmlperlplpmpyrbsh,xhtmlxmlxsl

      也就是说,Google Code Prettify支持高亮的语言:CJavaPythonBashHTMLXMLJavascriptMakefilesRubyPHPAwkPerlBasicClojureCSSDartErlangGoHaskellLispSchemeLLVMLuaMatlabPascalRScalaSQLLaTeX等语言。

      Google Code Prettify 的官方说明和使用说明:https://github.com/google/code-prettify

      主题风格

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

      Google Code Prettify 官方提供的主题:https://rawgit.com/google/code-prettify/master/styles/index.html

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

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

      修改本插件

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

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

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

      改进完善

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

      其他说明

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

      本站下载:http://blog.wmphp.com/down/wp-googlecodeprettify.zip

      感谢原文:https://www.html.cn/archives/4804

    END
    如本资源侵犯了您的权益,请联系投诉邮箱admin@wmphp.com进行举报!我们将在收到邮件的1个小时内处理完毕。 本站仅为平台,发布的资源均为用户投稿或转载!所有资源仅供参考学习使用,请在下载后的24小时内删除,禁止商用! Wmphp.com(完美源码)助力正版,如您有自己的原创产品,可以联系客服投稿,代理出售! Wmphp.com(完美源码)客服QQ:136882447 Wmphp.com(完美源码)商务电话(仅对企业客户/个人用户):15120086569 (微信同步) 请注意:本站不提供任何免费的技术咨询服务,为了节约时间,下载前 请确认自己会技术
    完美源码 » 实现的WordPress代码高亮插件——WP-googlecodeprettify
    2417+

    本站勉强运行

    148+

    用户总数

    510+

    资源总数

    1+

    今日更新

    2021-5-14

    最后更新时间