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

代码高亮插件琳琅满目，各有优点，作为wordpress文章编写非常有必要，作者也试着找寻了很多，最后选定WP-GeSHi-Highlight，理由可以自由的改写CSS，定制自己的代码风格。

一、WP-GeSHi-Highlight 代码书写格式

   <pre lang="html" line="1" escaped="true" >

```
     //这里添加代码……
```
```
   </pre>
```

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

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

二、WP-GeSHi-Highlight 样式自定义

WP-GeSHi-Highlight 插件目录下有一个 wp-geshi-highlight.css 文件，只需将这个文件复制到你当前所用的主题根目录，然后修改里面的css代码即可。这样一来，即使更新 WP-GeSHi-Highlight 插件，也不会丢失你的自定义样式了。也可以直接修改这个CSS，在wordpress-插件-已安装插件-编辑-wp-geshi-highlight.css，也可以修改好上传到插件目录WP-GeSHi-Highlight下，但这样已更新必须重新再改写，建议第一种方法。

三、wp-geshi-highlight.css 修改说明

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

如果你的网页布局较窄，你的代码过长，那么会在底部出现滚动条，非常不美观，让它自动换行的话在.wp-geshi-highlight pre, .wp-geshi-highlight span添加如下代码：

white-space: pre-wrap;/*自动换行*/

word-wrap:break-word;/*自动换行*/>

```
 /*
```

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

```
*/
```

.wp-geshi-highlight pre, .wp-geshi-highlight span {

```
    overflow: visible;
```
```
    margin: 0 !important;
```
```
    padding: 0;
```
```
    border: none;
```
```
    box-shadow: none;
```

    background-color: #f8f8f8;/*背景颜色*/

    font-size: 14px !important;/*字体大小*/

```
    line-height: 28px !important;
```

    font-family: Consolas, Monaco, 'Microsoft YaHei','WenQuanYi Micro Hei' ,

                'Lucida Console', monospace;

    word-wrap: normal; /* Otherwise Chrome wraps lines */

    white-space: pre;/*可以删掉了*/

    white-space: pre-wrap;/*自动换行*/

    word-wrap: break-word;/*自动换行*/

```
}
```
```
.wp-geshi-highlight ol {
```
```
    margin: 0 !important;
```
```
    padding: 0 !important;
```
```
    list-style: decimal !important;
```
```
  }
```
```
.wp-geshi-highlight ol > li {
```
```
    position: relative; 
```
```
    margin: 0 0 0 40px; 
```
```
}
```
```
.wp-geshi-highlight li {
```
```
    padding-left: 5px;
```
```
    font-family: monospace;
```
```
    font-size: 14px;
```
```
    list-style: decimal !important;
```

    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;

```
}
```

/* Enforce background-color in some non-official themes when using numbering */

```
.wp-geshi-highlight div ol li{
```
```
    background-color: #fdfdfd;
```
```
}
```

四、WP-GeSHi-Highlight 下载安装

在 WordPress后台插件安装界面搜索 WP-GeSHi-Highlight 即可在线安装，或者在这里下载:https://wordpress.org/plugins/wp-geshi-highlight/

需要了解更多用法和帮助，请访问https://gehrcke.de/wp-geshi-highlight/

511遇见

不一样的遇见

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

您可能感兴趣的文章:

相关文章: