代码高亮工具

来源:互联网 发布:网络安全法简要解读 编辑:程序博客网 时间:2024/05/13 21:20

这里我们通过google-code-prettify来为代码实现高亮的功能。

通过富文本编辑工具添加的代码会用<pre></pre>标签包裹。pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

我们就是通过对这些标签加上一些样式来实现代码的高亮。

一、下载并引用

天朝的程序员辛苦啊,找个资料还得想办法翻墙,这里提供免积分下载地址:http://download.csdn.net/detail/yangnianbing110/8150727,解压之后在得到文件prettify.css,prettify.js。在我们的页面上引入这两个文件。
    <link rel='stylesheet' href='/stylesheets/prettify.css' />    <script type="text/javascript" src="/javascripts/prettify.js"></script>

二、让它们干活

样式和js都引入进来了,我们还需要让他们工作。在body中添加一个onload事件
<bod onload="light()">function light(){    $("pre").addClass("prettyprint");     prettyPrint(); //这里这个函数调用不知道干啥,没有仔细去看源码,感觉高亮代码的话,无非就是添加一个样式}

然后显示效果如下图


0 0
原创粉丝点击