WP-GeSHi-Highlight代码高亮插件推荐及使用教程

在WordPress代码高亮领域，WP-Syntax插件曾一度备受青睐。然而，该插件已超过两年未进行更新维护，功能逐渐无法满足现代开发需求。今天，我们将为大家隆重介绍一款基于WP-Syntax全面重构的升级版高亮插件——WP-GeSHi-Highlight。这款插件不仅继承了WP-Syntax的所有核心功能，更在输出效果、API兼容性及用户体验上实现了质的飞跃。WP-GeSHi-Highlight支持超过数十种编程语言的高亮显示，具体语言列表可参考官方文档。

WP-GeSHi-Highlight 代码书写格式

在文章中插入代码时，请使用以下基本格式：

“`html
//这里添加代码...
“`

其中：
– `lang=”html”`：指定代码语言，可根据实际需求修改为javascript、css、php等
– `line=”1″`：控制是否显示行号，移除此参数即可隐藏行号
– `escaped=”true”`：防止代码转义，可根据需要调整

特别提醒：在WordPress后台编辑时，务必在HTML编辑模式下插入代码。若随意切换到可视化模式，代码很可能会被错误转义，导致显示异常。

WP-GeSHi-Highlight 样式自定义

WP-GeSHi-Highlight自带精美的高亮效果，但支持深度自定义。若您对默认样式不满意，可以执行以下操作：

1. 在插件目录中找到`wp-geshi-highlight.css`文件
2. 将该文件复制到当前主题的根目录
3. 直接编辑文件中的CSS代码，保存后即可应用自定义样式

这种设置方式的优势在于，即使更新插件，您的个性化样式也不会丢失。WordPress大学目前使用的样式如下，可供参考：

“`css
/* Copyright 2009-2014, Jan-Philip Gehrcke (http://gehrcke.de) */
/* 简约风格样式 */
/* 测试兼容：TwentyTwelve、TwentyThirteen及多个自定义主题 */
/* 在现代Firefox(27)和Chrome(33)浏览器中表现良好 */
/* 设置绝对字体大小是确保代码正确显示的关键，尤其对Chrome浏览器 */

.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;
white-space: pre;
}

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

.wp-geshi-highlight ol > li {
position: relative;
margin: 0 0 0 30px;
}

.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 下载安装

安装过程非常简单：
1. 登录WordPress后台
2. 进入”插件”→”安装插件”
3. 搜索”WP-GeSHi-Highlight”
4. 点击”立即安装”完成安装

若需要离线安装，可访问官方下载页面获取最新版本。

欲了解更多高级用法和详细帮助，请访问作者官方网站获取完整文档。

文章网址：https://www.wpbull.com/chajian/5667.html