用google-code-prettify代替Crayon Syntax Highlighter插件 | WordPress免插件代码高亮

用google-code-prettify代替Crayon Syntax Highlighter插件 | WordPress免插件代码高亮

最近在忙做安卓毕业设计,在网站分享代码时竟发现我的网站连代码高亮的功能都没有,于是先暂停FYP那边的事情,正好换换头脑,用google-code-prettify下载到本地然后加载代码高亮。废话不多说了,行くぞ!

 

【步骤1】先去google-code-prettify下载页面下载文件,http://code.google.com/p/google-code-prettify/downloads/list,上不了谷歌的自行百度“google-code-prettify文件下载”,作者提供两个版本,第一个是精简版,第二个是完整版,咱们下精简的就行。点击文字进入链接,跳转后再点一下文字就下载了。

用google-code-prettify代替Crayon Syntax Highlighter插件 | WordPress免插件代码高亮

 

【步骤2】解压刚才下载的压缩文件,在解压后的文件夹中找到名为“prettify.css”和“prettify.js”的文件,用FTP上传到你的网站主题(Theme)根目录。然后添加下面的代码到header.php的<head>和</head>标签之间,就引用了刚才那俩文件。

 

【步骤3】每次想用代码高亮的时候,在WordPress的编辑器切换到文字/代码(Text)模式,然后添加下面的代码,再切换回视窗(Visual)模式(这点很重要,因为如果你在代码模式下粘贴你的代码,WordPress就把它当做代码运行了,会吞掉它想吃的)!!在视窗模式下找到你刚才放在<pre>标签中的【代码代码代码】,用你的代码替换【代码代码代码】就好了(因为我们切换回视窗模式了,所以只能看见刚才放的文字了)。

参数说明:<pre>标签是HTML自带的预排格式文本(Preformatted Text),用class元素来调用代码高亮,写全就是这样class=”prettyprint”,其中你可以添加或删除linenums元素来添加或不添加备注行数。

 

【美化】关于样式:如果你不喜欢那个默认样式,可以看google-code-prettify官方提供的几个CSS样式(http://google-code-prettify.googlecode.com/svn/trunk/styles/index.html),使用方法也很简单,就是点你喜欢的样式,然后复制里面的CSS内容替换你自己的prettify.css文件。当然,也可以自己尝试修改一下CSS内容。

 

【进阶】如果不想每次手动添加代码高亮的代码,可以在WordPress的编辑器中加入一个标签按钮,复制以下代码到functions.php文件,位置加到文件最后一行在PHP的结束句符号?>之前就行,然后保存。

 

参考文献:WordPress在文章编辑器添加pre自定义标签按钮GettingStarted How to style code in your web-pages

 

</catmee> 文章全部原创、谢绝转载,作者「BianLei」,如果喜欢欢迎分享链接,相关内容参见本站版权声明
如果您觉得本站的存在对您多少有所帮助,可以用手机支付宝扫一扫以下二维码支付任意金额作为支持:支付宝
本站相关:Facebook | YouTube | QQ空间
Tagged . Bookmark the permalink.

COMMENTS: 8

  1. 大致 says:

    简直是困了给我送枕头啊!这两天正好对现在的代码高亮插件不爽来着。
    谢谢!

  2. 从良未遂 says:

    我用的是在线生成方式

    • BianLei says:

      我之前也看了一下,好像大多数人都这么现用现生成,我还是嫌弃这个方式太累了就没用,啊哈哈,干嘛不一劳永逸呢?

  3. drunkevil says:

    这个大概对静态博客也适用吧。

  4. Anonymous says:

    发现你使用回来了插件了。
    这个能不能自动捕获code标签?

    • BianLei says:

      不会捕获code标签,没研究过在哪里修改这个。插件还是占内存高,不过我需要那个弹窗功能~~

Comment Anonymously? No Problem! | 可以匿名评论了我会说?

Fill up Email address to subscribe reply and display your avatar from Gravatar (If any)
填写邮箱即可显示您在Gravatar的头像