苏醒 苏醒
  • 首页
  • WP主题
  • WP插件
  • WP教程
  • 是日一记
  • 博客
    • 留言
    • 唠叨
    • 盆友圈
    • 栏目推荐

suxing

管理员
每天清晨有多少双眼睛睁开,有多少人的意识苏醒过来,便有多少个世界。
IP归属地: 广东
文章
214
评论
236
suxing
2014-09-24 22:35:23 广东

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

文章字数:1232
阅读时间: 4 分钟
智能摘要 DeepSeek
最近在苏醒网站进行改版时,尝试了多种代码高亮方案,最终选择了Google Code Prettify,因其简单易用和小体积特点受到青睐。教程中提到,通过在文章中检测pre标签并在网页脚本中插入Prettify.js和Prettify.css文件,结合jQuery插件即可实现代码高亮。教程还提供下载链接,包括百度云和官方下载地址。

最近苏醒的网站改版,在集成代码高亮方面,尝试过好几种办法,又免插件的、有用插件的,其中发现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]

  • WordPress 教程
  • 代码高亮
  • 免插件代码高亮
等 人表示很赞
12,516
0

评论

空空如也
suxing
suxing
2019-07-19 16:58:37 广东

推荐 WordPress运行内存不足的解决方式

智能摘要 DeepSeek 在WordPress运行时,由于主机空间内存不足或主题功能占用过多内存,可能触发PHP内存不足错误(错误代码:<code&g ...
  • WordPress 教程
  • memory
  • php
  • wordpress
2,680 0
suxing
suxing
2018-08-27 19:41:07 广东

推荐 开通了一个微信 WordPress 主题交流群,速进!

我们创建了两个交流群,欢迎WordPress主题爱好者和使用者加入。官方发布、优惠、公告等信息将通过群第一时间通知。群内提供微信群专属优惠码、行业资讯、建站心得和新品折扣,每日定时发送最新内容。微信群:微信ID:?? 加入交流群,日常活动包 ...
  • WordPress 教程
  • wordpress
  • wordpress主题
  • WordPress主题,主题交流群,WordPress爱好者
  • WordPress主题,微信交流群,优惠福利
  • WordPress主题交流群
12,700 4
suxing
suxing
2016-04-23 9:55:54 广东

推荐 WordPress菜单导航功能设置教程

智能摘要 DeepSeek 初次使用WordPress主题建站时,建议按以下顺序操作:新建分类目录、几篇文章、页面、菜单和小工具,调整功能选项。特别提醒不要在 ...
  • WordPress 教程
  • WordPress导航教程
  • WordPress导航设置
  • wordpress教程
  • WordPress菜单教程
  • WordPress菜单设置
11,853 2
suxing
suxing
2019-12-25 12:36:27 广东

推荐 双旦将至,WordPress 网站实现下雪特效,云体验下雪的赶脚

智能摘要 DeepSeek 圣诞元旦期间, WordPress 用户可以通过 nicetheme 提供的雪花特效积木轻松实现网站背景的雪花飘落效果。积木启动后 ...
  • WordPress 教程
3,159 1
suxing
suxing
2015-05-21 23:28:24 广东

推荐 PHP曝DOS漏洞可致CPU灌满 涉及多个PHP版本

智能摘要 DeepSeek PHP存在远程DoS漏洞,影响5.3、5.4、5.6等版本,官方提供补丁但5.3无官方补丁,民间制作"民间版"补丁。漏洞通过解析multipart/form-data请求导致资源耗尽,已有 ...
  • WordPress 教程
5,259 0

我用的 WordPress 主题

2021 年单栏 WordPress 主题

Copyright © 2012-2025 苏醒. All rights reserved. Designed by nicetheme.
  • 首页
  • 主题
  • 教程
  • 博客
  • 唠叨
  • 留言