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

前端之家收集整理的这篇文章主要介绍了WordPress代码高亮插件 WP-GeSHi-Highlight前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

//这里添加代码……

其中,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/

猜你在找的wordpress相关文章