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

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

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

   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;
}