WordPress 代码高亮插件 WP-GeSHi-Highlight | LsevenTT博客-站群哥
   

LsevenTT博客-站群哥

认真你就输了

WordPress 代码高亮插件 WP-GeSHi-Highlight

倡萌之前推荐过《WordPress代码高亮插件:WP-Syntax》,这个插件很好用,但是已经2年多没有更新了,今天推荐的 WP-GeSHi-Highlight 是对 WP-Syntax 进行重写改进的高亮插件,输出代码更加简洁,跟进最新的 WordPress API 调用,完全兼用 WP-Syntax (使用方法,参数都继承了)。WP-GeSHi-Highlight 支持N多种语言高亮 。

 

WP-GeSHi-Highlight 代码书写格式

 

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

    其中,lang=”html”表示代码语言为html,请根据自己需要修改; line=”1″ 表示显示行号,如果不需要,去掉即可;escaped=”true” 是为了防止代码转义,如果不需要,去掉即可。

    注意:在wordpress后台使用 WP-GeSHi-Highlight 等代码高亮插件,需要在html模式下添加代码,不要随意切换到可视化模式,否则代码就容易转义!!

    WP-GeSHi-Highlight 样式自定义

    WordPress大学 目前已经更换了 WP-GeSHi-Highlight ,自带的高亮效果已经很不错了。如果你不满意自带的效果,WP-GeSHi-Highlight 插件目录下有一个 wp-geshi-highlight.css 文件,只需将这个文件复制到你当前所用的主题根目录,然后修改里面的css代码即可。这样一来,即使更新 WP-GeSHi-Highlight 插件,也不会丢失你的自定义样式了。

    以下就是 WordPress大学 目前使用的样式,如果你需要,可以用来覆盖 wp-geshi-highlight.css 原有代码即可。

    1. /*
    2.    Copyright 2009-2014, Jan-Philip Gehrcke (http://gehrcke.de)
    3. 
      

       

 

  •    Simplistic styling. Tested with TwentyTwelve, TwentyThirteen and
  •    a number of custom themes in modern versions of Firefox (27) and Chrome (33).
  •    An absolute font size set for pre, span, li (within highlight container)
  •    is the safest solution for proper code display, especially in Chrome.
  • 
    

     

  •  

  •    I tried to set all relevant styles. However, certain themes might define
  •    styles affecting the code display (it is difficult to anticipate these cases,
  •    so I expect this to happen). In these cases, you need to identify
  •    the corresponding selectors and override your theme's styles via this file
  •    (wp-geshi-highlight.css), placed in your theme's directory.
  • */
  • .wp-geshi-highlight pre, .wp-geshi-highlight span {
  •     overflow: visible;
  •     margin: 0;
  •     padding: 0;
  •     border: none;
  •     box-shadow: none;
  •     background: none;
  •     font-size: 14px;
  •     font-family: Consolas, Monaco, 'Microsoft YaHei','WenQuanYi Micro Hei' ,'Lucida Console', monospace;
  •     word-wrap: normal; /* Otherwise Chrome wraps lines */
  •     white-space: pre;
  • }
  • 
    

     

  •  

  • .wp-geshi-highlight ol {
  •     margin: 0;
  •     padding: 0;
  • }
  • 
    

     

  •  

  • .wp-geshi-highlight ol > li {
  •     position: relative; /* Create a positioning context */
  •     margin: 0 0 0 30px; /* Give each list item a left margin to make room for the numbers */
  • }
  • 
    

     

  •  

  • .wp-geshi-highlight li {
  •     padding-left: 5px;
  •     font-family: monospace;
  •     font-size: 14px;
  •     border-left: 1px solid #eee;
  •     }
  • 
    

     

  •  

  • .wp-geshi-highlight {
  •     padding: 0 0 0 15px;
  •     margin: 2px 0 30px 0;
  •     overflow-x: auto;
  •     border-bottom: 1px solid #ccc;
  •     border-top: 1px solid #ccc;
  •     background-color: #f8f8f8;
  •     box-shadow: 0 8px 7px -10px #CCC, 0 -8px 7px -10px #CCC;
  • }
  •  

    WP-GeSHi-Highlight 下载安装

    在 WordPress后台插件安装界面搜索 WP-GeSHi-Highlight  即可在线安装,或者在这里下载 WP-GeSHi-Highlight

    • Unique Post

    评论被关闭