WordPress代码高亮插件Enlighter个性化设置

http://web.qingcheng.club/wp-content/uploads/2025/05/1747484597-Enlighter-banne.png" src="https://web.qingcheng.club/wp-content/themes/onenav/assets/images/t.png" alt="WordPress代码高亮插件Enlighter个性化设置" alt="" width="772" height="250" />

特点和功能

• 编辑器集成：能与 WordPress 的 Gutenberg 编辑器和经典编辑器（TinyMCE）完全集成。在 Gutenberg 编辑器中，可通过 “Enlighter 源代码” 模块添加代码块；在经典编辑器中，可通过工具栏中的 Enlighter 按钮进行操作，还支持内联语法高亮，方便用户直接在编辑器中高亮代码。
• 语言支持广泛：支持众多常见编程语言，包括但不限于 CSS、HTML、Java、PHP、SQL、YAML、Ruby、Python、JavaScript 等。对于不支持的语言，其强大的通用突出显示引擎也能较好地处理。
• 主题定制：带有易于使用的主题定制器，用户无需具备 CSS 知识，即可轻松修改内置主题，还支持 LIVE 预览模式，方便用户实时查看修改效果。同时提供了多种预设主题，如 Enlighter、Classic、Bootstrap、Beyond 等，满足不同用户的审美需求。
• 代码分组展示：支持自动创建选项卡面板，可将多个代码块组合在一起展示，适用于多语言示例，如同时展示 HTML + CSS + JS 代码。
• 其他特性：具有高级配置选项，可在选项页面进行设置，如是否显示代码行数、添加滚动条、设置鼠标放上效果等；支持代码块的自动转换，可将经典编辑器中的代码块转换为 Enlighter 源代码块；还具备良好的兼容性，支持 Crayon Syntax Highlighter、Codecolorer 等多种插件的兼容模式。

安装和使用

• 安装：可通过 WordPress 插件市场直接搜索 “Enlighter – Customizable Syntax Highlighter” 进行下载安装，也可前往官网下载插件压缩包，解压后上传到 WordPress 的插件目录，再到后台的插件管理中启用。
• 官方下载地址：点我下载
• 使用：安装启用后，在文章编辑界面会出现相应的 Enlighter 按钮或图标，点击即可添加代码块，选择要高亮的代码语言和格式，输入代码内容，Enlighter 会自动对代码进行高亮显示。

个性化设置

        首先点击Appearance → Theme，将插件主题修改为Theme Customizer之后点击保存，再点击Theme Customizer → Base theme将调整主题修改为bootstrap4点击保存，完成以上步骤之后再进行接下来的个性化设置。

• 代码框右上角按钮改中文，css代码添加至 WordPress主题自定义css代码处。

/* 改文字 */
.enlighter-t-wpcustom .enlighter-toolbar .enlighter-btn-copy:after {
    content: '复制';
}

.enlighter-t-wpcustom .enlighter-toolbar .enlighter-btn-window:after {
    content: '新窗口';
}

/* 代码块容器基本样式 */
.enlighter-default {
    border-radius: 8px;
    /* 圆角边框 */
    padding-top: 42px !important;
    /* 顶部预留空间 */
    margin-bottom: 20px !important;
    /* 底部间距 */
    background: #fff;
    /* 背景色 */
}

/* 代码内容区域样式 */
.enlighter-default .enlighter {
    max-height: 510px;
    /* 最大高度，超出显示滚动条 */
    overflow: auto;
    /* 自动显示滚动条 */
    display: block;
    /* 块级元素 */
    background: #fff;
    /* 背景色 */
}

.enlighter-t-wpcustom .enlighter-text {
    color: #e308ad;
}

.enlighter-t-wpcustom .enlighter-m0 {
    color: #1e7f34;
}

.enlighter-t-wpcustom .enlighter-m3 {
    color: #28a745;
}

示例图：

csshttp://web.qingcheng.club/wp-content/uploads/2025/05/1747572377-Enlighter-css.png" src="https://web.qingcheng.club/wp-content/themes/onenav/assets/images/t.png" alt="WordPress代码高亮插件Enlighter个性化设置" alt="" width="690" height="209" />

html

http://web.qingcheng.club/wp-content/uploads/2025/05/1747572378-Enlighter-html.png" src="https://web.qingcheng.club/wp-content/themes/onenav/assets/images/t.png" alt="WordPress代码高亮插件Enlighter个性化设置" alt="" width="690" height="520" />

js

http://web.qingcheng.club/wp-content/uploads/2025/05/1747572378-Enlighter-js.png" src="https://web.qingcheng.club/wp-content/themes/onenav/assets/images/t.png" alt="WordPress代码高亮插件Enlighter个性化设置" alt="" width="680" height="506" />

php

http://web.qingcheng.club/wp-content/uploads/2025/05/1747572378-Enlighter-php.png" src="https://web.qingcheng.club/wp-content/themes/onenav/assets/images/t.png" alt="WordPress代码高亮插件Enlighter个性化设置" alt="" width="690" height="521" />