上篇 下篇

不用插件实现WordPress代码高亮显示

2010年08月01日 ⁄ Wordpress ⁄ 作者：知更鸟 ⁄ 共 3493字 ⁄ 评论数 162 ⁄ 被围观 37,060+

PHP:

1. <div id="branding" role="banner">
2. <?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
3. <<?php echo $heading_tag; ?> id="site-title">
4. <span>
5. <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
6. </span>
7. </<?php echo $heading_tag; ?>>
8. <div id="site-description"><?php bloginfo( 'description' ); ?></div>
9. <?php
10. // Check if this is a post or page, if it has a thumbnail, and if it's a big one
11. if ( is_singular() &&
12. has_post_thumbnail( $post->ID ) &&
13. ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
14. $image[1] >= HEADER_IMAGE_WIDTH ) :
15. // Houston, we have a new header image!
16. echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
17. else : ?>
18. <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
19. <?php endif; ?>
20. </div><!-- #branding -->

CSS:

1. #header {
2. padding: 30px 0 0 0;
3. }
4. #site-title {
5. float: left;
6. font-size: 30px;
7. line-height: 36px;
8. margin: 0 0 18px 0;
9. width: 700px;
10. }
11. #site-title a {
12. color: #000;
13. font-weight: bold;
14. text-decoration: none;
15. }
16. #site-description {
17. clear: rightright;
18. float: rightright;
19. font-style: italic;
20. margin: 14px 0 18px 0;
21. width: 220px;
22. }
23. /* This is the custom header image */
24. #branding img {
25. border-top: 4px solid #000;
26. border-bottom: 1px solid #000;
27. clear: both;
28. display: block;
29. }

jscript:

1. $(function() {
2. $('.related_thumbnail img').animate({"opacity": .5 });
3. $('.related_thumbnail img').hover(function() {
4. $(this).stop().animate({ "opacity": 1 });
5. }, function() {
6. $(this).stop().animate({ "opacity": .5 });
7. });
8. });

工具下载：http://www.blogjava.net/Files/Unmi/CodeRender(Unmi).rar

原文地址：http://www.blogjava.net/Unmi/archive/2008/05/03/197903.html

日志分页: 1 2

返回

作者: 知更鸟

该日志由 知更鸟 于661 天前发表在Wordpress分类下， 你可以发表评论，并在保留原文地址及作者的情况下引用到你的网站或博客。
转载请注明: 不用插件实现WordPress代码高亮显示 | 知更鸟 +复制链接
关键字: Wordpress, 代码高亮

您可能还会对这些文章感兴趣！

1. 在文章中添加一个广告位
2. 为Wordpress链接关系（rel）添加external和nofollow选项
3. Wordpress主题侧边栏随窗口滚动
4. HotNews Pro 2.7 Plus侧边最新文章中排除分类
5. 单篇文章嵌入不同的RSS或Atom feed地址
6. jQuery实现侧边栏随窗口滚动
7. WordPress博客评论可见实现方法
8. 为Wordpress添加文章字数统计

目前有 162 条留言 其中：访客:79 条, 博主:17 条 引用: 66

1. SKF轴承,NSK轴承 : 2011年12月17日 157 天前 17:24:19  51楼 @回复 回复

   顶！期望能分享！！！！
2. 小乖乖 : 2012年01月03日 141 天前 04:01:34  52楼 @回复 回复

   鸟哥 请问代码是什么插件？
   • 知更鸟 : 2012年01月04日 139 天前 18:19:51 @回复 回复

     看着文章还问是什么插件？
3. dmaojie : 2012年01月07日 136 天前 20:07:10  53楼 @回复 回复

   看看行不行
4. 皆为浮云 : 2012年01月15日 128 天前 22:01:05  54楼 @回复 回复

   鸟哥，现在你还是用的这个方法吗？
   2.7版本的主题里，现在有没有添加这些代码？
   • 知更鸟 : 2012年01月15日 128 天前 22:49:44 @回复 回复

     是的，一直在用
5. 卧龙居 : 2012年01月28日 116 天前 12:44:05  55楼 @回复 回复

   这个好像不支持html代码，有其他的方法能让主题支持html吗？
6. 东东@丫丫情侣博客 : 2012年02月05日 108 天前 13:25:45  56楼 @回复 回复

   为什么我用了你的代码高亮的方法显示的和你的不一样啊
   这是我在文章中插入的代码

     
   /*
    * Superfish v1.4.8 - jQuery menu widget  
    * Copyright (c) 2008 Joel Birch  
    *  
    * Dual licensed under the MIT and GPL licenses:  

   这是文章页面加载的你的css样式和js代码

   但是显示效果和你的不一样啊
   你可以点击这个链接看看我的代码高亮显示的，前面没有像你的一样数字行号
7. 东东@丫丫情侣博客 : 2012年02月05日 108 天前 13:26:30  57楼 @回复 回复

   求解，很急用，麻烦鸟哥啦
8. 东东@丫丫情侣博客 : 2012年02月05日 108 天前 13:29:21  58楼 @回复 回复

   http://blog.woyaya.net/navigation-menu-on-wordpress-standard-analytical-analysis.html 你可以点击这个页面看看我的代码高亮，查看页面源代码的话你会发现我加载的是你的、highlight.css 和 jquery.colorbox.js 还有一个问题就是我是网站分类和页面的关键词描述，那些也按照你的方法改的，可是中间为什么出现了那么多空行啊 你随便点击一个分类的页面查看源代码就看到啦，帮帮忙
9. 东东@丫丫情侣博客 : 2012年02月05日 108 天前 13:30:46  59楼 @回复 回复

   如果方便的话加一下我的QQ1282570027，谢谢啊
10. fangcaoba.com : 2012年04月09日 43 天前 19:02:35  60楼 @回复 回复

    鸟哥，拜托加下我qq 1028135490 遇到问题实在解决不了了。要不把邮箱地址告诉我也行，我把ftp等资料给你，你有时间帮我解决一下 谢谢
11. 刚刚 : 2012年04月11日 42 天前 16:26:50  61楼 @回复 回复

    用推他相册,他们的相册也是免费的.不防外链.
12. 小老翁 : 2012年05月10日 12 天前 23:12:36  62楼 @回复 回复

    感谢分享，我正在搜集呢！
13. amasun : 2012年05月14日 8 天前 20:03:38  63楼 @回复 回复

    为什么：

    “打开并编辑 wp-includes/formatting.php 文件，找到以下代码：”……
    这行代码显示为颜色#0196e3。而不是highlight.css中的黑色？
    • amasun : 2012年05月14日 8 天前 20:30:50 @回复 回复

      应该是#2b91af。但我还是不知道是为什么这个颜色，我选的php。
      • amasun : 2012年05月14日 8 天前 21:16:26 @回复 回复

        经过一番折腾，终于发现了。鸟哥是不是在coderender生成代码之后把其中的<span>标签都去掉了？所以本来的黑色文字可以显示为#2b91af?还是因为鸟哥有其他的方法？其他帖子里的代码都带着<span>标签。
14. simple : 2012年05月18日 5 天前 02:50:31  64楼 @回复 回复

    请教鸟哥： 日志怎么显示代码？比如你这个文章最后的10行解决办法，是怎么样实现显示的，并且有行号？我并不需要高亮，只要显示就行了。我尝试使用code夹起来，不行。
    谢谢，谢谢
15. simple : 2012年05月19日 4 天前 01:32:46  65楼 @回复 回复

    鸟哥的意思是： 本文的办法， 有高亮代码的功能，当然也就可以显示代码？ 所以，要想在wordpress日志加入一些代码，使用这个办法就行了
16. simple : 2012年05月19日 4 天前 01:44:16  66楼 @回复 回复

    谢谢鸟哥，真的是这样！ 我懂了