Prettify.js使代码高亮

前端 JavaScript

创建时间:2016-10-30 21:56

字数:504 阅读:

简单配置
懒人模式 run_prettify.js
更多高亮主题

在上一篇中演示，发现了Prettify可以很简单的使代码高亮。
项目地址 https://github.com/google/code-prettify
教程 https://github.com/google/code-prettify/blob/master/docs/getting_started.md

简单配置

<link rel="stylesheet" type="text/css" media="all" href="http://cdn.staticfile.org/prettify/r224/prettify.min.css" />
<script type="text/javascript" src="http://cdn.staticfile.org/prettify/r298/prettify.min.js"></script>

在 body 标签的 onload 事件中添加代码高亮动作:

<body onload="prettyPrint()">
...
</body>

在 body 中添加需要高亮的代码, prettify 依靠 <pre>, <code> 或 <xmp> 标签的 class 属性的 prettyprint 属性值作为高亮标识:

<pre class="prettyprint">
int main()
{
    printf("Hello, world!\n");

    return 0;
}
</pre>

开启显示行号, 在 class 属性中添加 linenums。
手动指定代码所用语言, class 属性中添加 lang-xxx:

<pre class="prettyprint lang-c linenums">
int main()
{
    printf("Hello, world!\n");

    return 0;
}
</pre>

懒人模式 run_prettify.js

run_prettify.js 是 prettify.js 的增强版, 引入后该 js 后, 能在页面加载完成后对所需高亮的代码块自动执行高亮, 此外还可以以添加请求参数的形式手动指定额外语言高亮规则, 使用哪种主题以及每段代码高亮完成后的回调动作, 如:

<!-- 建议添加在 <body> 闭合标签前 -->
    <script src="http://cdn.staticfile.org/prettify/r298/run_prettify.js?lang=lua&lang=yaml&skin=sons-of-obsidian"></script>
</body>

run_prettify.js 完整参数指令表:

参数	值	meaning
autoload=(true or false)	true	页面加载完成后是否自动高亮, 默认为 true
lang=...	语言英文简称	加载额外的 lang-xxx.js 高亮规则文件
skin=...	样式文件名	加载高亮样式文件 xxx.css
callback=js_ident	回调函数名	高亮完成后将调用 window.exports[函数名]

Prettify.js使代码高亮

简单配置

懒人模式 run_prettify.js

更多高亮主题