代码高亮插件google-code-prettify使用教程

本文介绍Google-Code-Prettify高亮代码插件的使用，主要包括一些CSS文件的引入、JS文件的引入以及通过JS实现自动匹配代码样式。

代码高亮插件google-code-prettify

google-code-prettify时Goolgle的js代码高亮插件

使用后的效果：

基本使用方法：

2.1下载插件

下载链接：google-code-prettify github

2.2 页面引入2个文件

Include prettify.js & prettify.css in your template.

在页面中引入链接填写你自己地址

<link href="~/js/google-code-prettify/prettify.css" rel="stylesheet" />
<script src="~/js/google-code-prettify/prettify.js"></script>

2.3 Enable Prettify Using jQuery

调用prettyPrint方法启动google-code-prettify的高亮

<script type="text/javascript">
  !function ($) {
    $(function(){
      window.prettyPrint && prettyPrint()   
    })
  }(window.jQuery)
</script>

//可以直接调用 prettyPrint方法
<script type="text/javascript">
    prettyPrint();
</script>

//也可以在body中加入onload="prettyPrint()"
//onload 事件在页面载入完成后立即触发。
<body onload="prettyPrint()">...</body>

2.4 Display

给pre标签或者Code标签的Class添加，prettyprint 如果需要行号则Class添加linenums

<!-- 只高亮不显示行号 -->
<pre class="prettyprint">
<!-- Your code here -->
</pre>
<!-- 显示行号 需要添加linenums -->
<pre class="prettyprint linenums">
<!-- Your code here -->
</pre>

异步加载代码如何使用google-code-prettify高亮

在使用js加载完code标签中的数据之后再调用一次prettyPrint方法就可以实现代码块高亮。

如果pre或code标签的Class中没有prettyprint类则可以用Jquery代码添加上.

//ajax请求要显示的代码数据
//...
//给所有code 标签添加 属性 
$("code").addClass("prettyprint");
//启动高亮
prettyPrint();

更换其他样式

访问 google-code-prettify的github点击Skin链接

然后下载选择你喜欢的样式，把相应的代码放入css文件中引入，不要忘记删除默认样式的prettify.css链接，不然会照成冲突。这样就可以更换其他代码高亮样式。

<link href="~/js/google-code-prettify/sons-of-obsidian.css" rel="stylesheet" />

设置半透明背景

pre {
    /*背景颜色*/
    background-color: rgba(0,0,0,0.7);
}

code {
    /* background: transparent;*/
    /*背景透明*/
    background-color: transparent !important;
    /*字体大小*/
    font-size: 115% !important;
}