0
无插件WordPress代码语法高亮
在你的博客页面里添加一些代码将会使你的文章更易读,然而,启用代码语法高亮将更能吸引读者对你所写文章的兴趣。如果你要一个简单的代码语法高亮插件,你可以很容易的在插件库里找到一个。但是真正能找到一个称心的,那就有点难。这里给大家推荐一个简单轻巧的语法高亮JS库,文件的大小大约是17kb,一个非常轻量的文件而且安装方法也很简单。
特性:
1. Demo
先看看一下这个 Demo,来满足你的视觉好奇心。打开页面后,请向下滚动页面。
2. 安装
1) 下载JS和CSS软件包 并上传到你的博客空间。
2) 在页面头部添加CSS链接
<link href="prettify.css" type="text/css" rel="stylesheet" />
在页面底部添加JS链接
<script type="text/javascript" src="prettify.js"></script>
其中链接的地址改为文件所在的真正地址。
3) 添加 onload=”prettyPrint()” 到要调用这个功能的页面的 body便签。 body的标签应看起来如下:
<body onload="prettyPrint()" >
4) 打开CSS文件,修改你自己想要的各种颜色,此步可选。
3. 使用
在你使用代码时,请把代码用<pre class=”prettyprint”>…</pre> 或 <code class=”prettyprint”>…</code>标签包围住,这样你的页面的代码将自动高亮。
问答:
问: prettify.js 对那些语言有用?
答:这是一个比较准确并可信的语法高亮软件,对于常用的语言都可用,包括: C, Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, and Makefiles. 对于Ruby, PHP, VB, Awk 和部分 Perl and Ruby也可用。 但是不适用于Smalltalk, 或CAML类型的语言。
问: prettify.js能启用代码行数功能吗?
答: 你可以添加 linenums 到CSS类里来启用这个功能。比如: <pre class=”prettyprint linenums”>
如果你不想从1 开始显示行数,你可以添加一个起始行数。比如: <pre class=”prettyprint linenums:4″> 将在第一行显示5. 如下:
// 开始为 4.
5 foo();
bar();
baz();
boo();
far();
10 faz();
如果你在安装或使用过程中有什么问题,欢迎你给我们留言。