0
0

无插件WordPress代码语法高亮

2011/06/14 · 评论 

在你的博客页面里添加一些代码将会使你的文章更易读,然而,启用代码语法高亮将更能吸引读者对你所写文章的兴趣。如果你要一个简单的代码语法高亮插件,你可以很容易的在插件库里找到一个。但是真正能找到一个称心的,那就有点难。这里给大家推荐一个简单轻巧的语法高亮JS库,文件的大小大约是17kb,一个非常轻量的文件而且安装方法也很简单。

特性:

  • 用于HTML页面
  • 即使代码中包含行号、链接等等,也可运行。
  • 简单的安装:只需加载一点JS和CSS,然后添加一个onLoad事件。
  • 可通过CSS定制样式,支持多种编程语言, 可扩展语言支持。
  • 支持跨浏览器平台
  • 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();
    

    如果你在安装或使用过程中有什么问题,欢迎你给我们留言。

    您可能也喜欢

    与大家分享点什么吧: