远方的海
远方的海,WordPress,免费
2014 Sep 23 21 : 39

WordPress代码高亮(附插件和非插件实现)

您当前的位置: 首页 > WordPress > 正文
欢迎光临远方的海!您可能还对 WordPress建站免费资源最新IT动态 感兴趣,点击开启 悦读 模式。CTRL+D 快捷收藏本文,我们期待您再次光临!
[文章目录]

之前一直为了Wordpress能简洁的浏览,去除了高亮代码,现在觉得还是高亮代码看着舒服点,从阅读体验上能给读者一种踏实、安心、可信赖的感觉。

所以,思前想后,还是把高亮代码弄回来了。这里给大家分享插件和非插件的实现方法。

插件实现代码高亮

可以实现Wordpress代码高亮的插件有很多,我也试过不少,从附加的js和css的请求数和引入文件的大小,以及外观、实用性来看,我只推荐一个插件:wp-syntax

用Wordpress插入代码,要防止php转义,可以添加 escaped=”true” 属性,经过测试,用wp-syntax插件可以完美解决php代码转义的问题(关于防止wordpress php代码转义,您还可以继续阅读这篇文章点击前往

WP-Syntax 和 WP-CodeBox 都是基于GeSHi支持的语言的语法,采用pre标签引入代码。

插件下载和使用方法

插件官方下载:点击下载

wp-syntax高亮代码的书写格式如下:

  1. <pre lang=“html” line=“1” escaped=“true” >
  2. //这里添加代码……
  3. </pre>

样式美化,用以下的css代码替换原插件的css文件里面的代码可以让代码显示更加美观(CSS优化来自WP大学):

  1. .wp_syntax {
  2.     color:#100;
  3.     background-color:#f9f9f9;
  4.     border:1px solid #EBEBEB;
  5.     margin:0 0 1.5em 0;
  6.     overflow:auto;
  7. }
  8. .wp_syntax {
  9.     overflow-x:auto;
  10.     overflow-y:hidden;
  11.     padding-bottom:expression(this.scrollWidth > this.offsetWidth ? 15:0);
  12.     width:99%;
  13. }
  14. .wp_syntax table {
  15.     border:none;
  16.     border-collapse:collapse;
  17.     margin:0;
  18.     padding:0;
  19.     width:100% !important
  20. }
  21. .wp_syntax caption {
  22.     padding:2px;
  23.     width:100%;
  24.     background-color:#def;
  25.     text-align:left;
  26.     font-family:Monaco;
  27.     font-size:13px;
  28.     line-height:20px;
  29. }
  30. .wp_syntax caption a {
  31.     color:#1982d1;
  32.     text-align:left;
  33.     font-family:Monaco;
  34.     font-size:13px;
  35.     line-height:20px;
  36.     text-decoration:none;
  37. }
  38. .wp_syntax caption a:hover {
  39.     color:#1982d1;
  40.     text-decoration:underline;
  41. }
  42. .wp_syntax div,.wp_syntax td {
  43.     border:none;
  44.     text-align:left;
  45.     padding:0;
  46.     vertical-align:top;
  47. }
  48. .wp_syntax td.code {
  49.     background:none;
  50.     line-height:normal;
  51.     whitewhite-space:normal;
  52.     padding-left:10px;
  53. }
  54. .wp_syntax pre {
  55.     background:transparent;
  56.     margin:0;
  57.     padding:0;
  58.     width:auto;
  59.     float:none;
  60.     clear:none;
  61.     overflow:visible;
  62.     font-family:Monaco;
  63.     font-size:13px;
  64.     line-height:20px;
  65.     whitewhite-space:pre;
  66. }
  67. .wp_syntax td.line_numbers pre {
  68.     border-right:3px solid #6CE26C;
  69.     background-color:#E7E5DC;
  70.     color:gray;
  71.     width:20px;
  72.     padding:0 5px;
  73.     text-align:rightright;
  74. }

非插件的方式实现代码高亮

点击下载所需小工具:点击下载

软件截图一览:

WordPress代码高亮(附插件和非插件实现)

程序是基于 dp.SyntaxHighlighter 写的格式化代码的工具。

支持的语言有:java/xml/sql/jscript/groovy/css/cpp/c#/python/vb/perl/php/ruby/delphi.

使用方法:

把css复制到主题的style.css里面,每次把需要高亮的代码复制到Source Code 窗口里面,选择语言,点击render即可得到html文件,把这个文件直接复制就可以使用。

效果DEMO:

如本站目前所用的高亮代码样式。

注意事项:

为了防止Wordpress的自动半角符号到全角符号转义,可以修改一下wp-includes/formatting.php里面的设置:

  1. 打开并编辑 wp-includes/formatting.php 文件,找到以下代码:
  2. // static strings
  3. $curl = str_replace($static_characters$static_replacements$curl);
  4. // regular expressions
  5. $curl = preg_replace($dynamic_characters$dynamic_replacements$curl);
  6. $curl 开头的两句代码注释掉,如下:
  7. // static strings
  8. //$curl = str_replace($static_characters, $static_replacements, $curl);
  9. // regular expressions
  10. //$curl = preg_replace($dynamic_characters, $dynamic_replacements, $curl);

以上。

好文!分享给朋友,或者点个赞吧~

文章信息

分类:WordPress

您可能也会喜欢

发表回复

Post Comment


  1. 测试评论 :

    再次测试评论

    2014-9-24
  2. ysam :

    前段时间也用过wp-syntax,虽然好看,不过那些生成的class太烦了

    2014-9-24
    • 远方的海水神 :

      我觉得还挺好~不过现在不用插件啦~

      2014-9-24
      • ysam :

        貌似你的评论框有问题。。
        评论提交过后,那段缓存头像的函数飞出来了。。

        2014-9-24
        • 远方的海水神 :

          :o :o 咦我这里是正常的,之前修改过,可能缓存还没刷新。

          2014-9-24
  3. Sven水神 :

    测试旋转头像

    2014-9-24
    • 远方的海水神 :

      你是假冒的博主没有博主验证 o(*≧▽≦)ツ┏━┓[拍桌狂笑!]

      2014-9-24
      • Timle :

        哈哈,博主太逗了

        2014-9-26