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

wordpress2个月前更新 qingcheng

0 0

Enlighter 是一款功能强大的 WordPress 语法高亮插件，以下是对它的详细介绍：

特点和功能

编辑器集成：能与 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: '新窗口';
}

如果提示文字想要改成中文，打开/wp-content/plugins/enlighter/resources/enlighterjs/enlighterjs.min.js文件进行修改：
1.搜索 Ke=”Copy to clipboard”; 将Copy to clipboard字段改为复制

2.搜索 Open code in new window 改为新窗口打开

3.复制提示修改：搜索 Code copied! 改为已复制！

4.个性化代码（按需添加设置）

/* 代码块容器基本样式 */
.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;
}

注意：当你操作完之后会发现代码块修改的内容未生效，需要你打开后台Enlighter插件,不要做任何修改，保存一下（点击保存会刷新插件缓存，让修改内容生效），然后F5刷新代码块页面，你会发现修改就生效了。

示例图：

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

html

php