苏醒 苏醒
  • 首页
  • WP主题
  • WP插件
  • WP教程
  • 是日一记
  • 博客
    • 留言
    • 唠叨
    • 友情链接
首页 WordPress 教程 免插件使用Google Code Prettify实现代码高亮

免插件使用Google Code Prettify实现代码高亮

suxing 2014-09-24 22:35:23

最近苏醒的网站改版,在集成代码高亮方面,尝试过好几种办法,又免插件的、有用插件的,其中发现Google Code Prettify来实现代码高亮是最简单和方便的,而且prettify 非常小,使用它来实现代码的高亮显示是个不错的选择。接下来,就给大家介绍下主题集成prettify代码高亮的办法:
[quote]教程[/quote]
1.检测文章中是否插入了pre标签。若插入了代码,就在网页的footer部分插入相应的prettify.js和prettify.css。把以下代码放到主题文件的functions.php文件中。

//正则匹配pre插入相应的prettify.js和css by suxing.me
add_filter('wp_footer','add_prettify');
function add_prettify(){
//定义全局post
global $post;
//正则匹配pre开始标签
preg_match_all('|(<pre)|i', $post->post_content, $matches);
if(is_single() && !empty($matches[0])) {
//如果存在pre标签时,就把以下代码加入到footer之中
?>
<link rel="stylesheet" id="is-load-css" href="<?php bloginfo('template_url'); ?>/js/prettify.css"/>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/prettify.js"></script>
<script type="text/javascript">
jQuery('document').ready(function(){
jQuery('.post pre').addClass('prettyprint linenums')
.wrap('<div class="precode clearfix"></div>');
window.prettyPrint && prettyPrint();
});
</script>
<?php
}
}

2.把prettify.js和prettify.css都加载主题目录的JS文件夹里面。

3.最后,在编辑文章的时候,输入<pre class="prettyPrint">代码放这里</pre>就可以使用标签实行代码高亮了。

[quote]下载[/quote]
[download-button href="https://www.suxing.me/go/google-code-prettify"]百度云下载[/download-button][download-button href="https://code.google.com/p/google-code-prettify/"]官方下载[/download-button]

# 代码高亮# 免插件代码高亮
2

评论 (0)

返回
    发表评论

猜你喜欢

  • 阿里云虚拟机如何设置wordpress伪静态规则
  • 阿里云 CDN 跨域问题: No 'Access-Control-Allow-Origin' header is present on the requested resource
  • WordPress 小Tips:如何不显示站点顶部工具栏
  • PHP 错误 Parse error: syntax error, unexpected '?' 解决办法
  • WordPress 建立数据库连接时出错
suxing
每天清晨有多少双眼睛睁开,有多少人的意识苏醒过来,便有多少个世界。
197
文章
289
评论
306
获赞
suxing

我用的 WordPress 主题

2021 年单栏 WordPress 主题

  • 首页
  • WP主题
  • WP插件
  • WP教程
  • 是日一记
  • 博客
Copyright © 2012-2023 苏醒. Designed by nicetheme.
  • 首页
  • 主题
  • 教程
  • 博客
  • 唠叨
  • 留言
  • 是日一记