Typecho 插件 EnlighterJS 深度去广告与美化

💡 为什么写这篇文章？

在追求极简博客的路上，代码高亮是技术博主的门面。EnlighterJS 虽强，但其内置的版权 Logo、冗余的工具栏以及偶发的排版“黑竖杠”实在让人如鲠在喉。

优雅不只是视觉的清净，更是对每一行代码的绝对掌控。 本文分享如何通过一个不到 100 行的插件脚本，彻底“收拾” EnlighterJS。

🛠️ 解决的核心痛点

1. 强制去广告：物理抹除顽固的版权跳转按钮。
2. 布局修复：根除右侧溢出的“黑竖杠”边框残留。
3. 零报警：修复表单 ID/Name 缺失导致的浏览器 SEO 警告。
4. 性能优先：自执行匿名函数封装，防止全局变量污染。

🚀 最终版插件代码：Enlighter Pro (v1.3.1)

直接保存为 Plugin.php 即可食用：

<?php
/**
 * EnlighterJS Pro - 极客高亮优雅版
 * @package Enlighter
 * @author osluck
 * @version 1.3.1
 */

class Enlighter_Plugin implements Typecho_Plugin_Interface
{
    public static function activate()
    {
        Typecho_Plugin::factory('Widget_Archive')->header = [__CLASS__, 'header'];
        Typecho_Plugin::factory('Widget_Archive')->footer = [__CLASS__, 'footer'];
    }

    public static function deactivate() {}

    public static function config(Typecho_Widget_Helper_Form $form)
    {
        $theme = new Typecho_Widget_Helper_Form_Element_Select('theme', [
            'enlighter' => 'Enlighter (默认)',
            'dracula'   => 'Dracula (暗黑)',
            'atomic'    => 'Atomic (蓝调)',
            'monokai'   => 'Monokai (经典)',
            'github'    => 'GitHub (浅色)'
        ], 'enlighter', _t('🎨 主题风格'));
        $form->addInput($theme);

        $windowButton = new Typecho_Widget_Helper_Form_Element_Radio('windowButton',
            ['true' => '开启', 'false' => '关闭'], 'true', _t('🪟 Mac 圆点'));
        $form->addInput($windowButton);

        $linenumbers = new Typecho_Widget_Helper_Form_Element_Radio('linenumbers',
            ['true' => '开启', 'false' => '关闭'], 'true', _t('🔢 显示行号'));
        $form->addInput($linenumbers);

        $copyButton = new Typecho_Widget_Helper_Form_Element_Radio('copyButton',
            ['true' => '开启', 'false' => '关闭'], 'true', _t('📋 复制按钮'));
        $form->addInput($copyButton);
    }

    public static function personalConfig(Typecho_Widget_Helper_Form $form) {}
    /** 注入样式 那个广告疯了一样！！！ */
    public static function header()
    {
        $url = Helper::options()->pluginUrl . '/Enlighter/static/';
        echo '<link rel="stylesheet" href="' . $url . 'enlighterjs.min.css" type="text/css" />';
        ?>
        <style>
            .enlighter-btn-website,.enlighter-btn[title*=EnlighterJS],.enlighter-btn[title*=Info],a[href*="enlighterjs.org"]{display:none!important;width:0!important;margin:0!important;opacity:0!important}
            .enlighter-toolbar>:not(.enlighter-btn-raw):not(.enlighter-btn-copy):not(.enlighter-btn-window){display:none!important}
            .enlighter-btn-copy,.enlighter-btn-raw,.enlighter-btn-window{display:inline-block!important;visibility:visible!important;opacity:1!important;margin:0 6px!important}
            .enlighter-toolbar,.enlighter-toolbar-bottom,.enlighter-toolbar-top{background:0 0!important;border:none!important;padding:4px 10px!important;margin:0!important;min-height:0!important;text-align:right!important;overflow:hidden!important}
            .enlighter-toolbar .enlighter-ellipsis,.enlighter-toolbar::after,.enlighter-toolbar::before{display:none!important;content:none!important}
            .enlighter-main{margin:2em 0!important;border-radius:12px!important;box-shadow:0 12px 30px rgba(0,0,0,.2)!important;border:none!important;overflow-x:auto!important}
            .enlighter-default .enlighter{white-space:pre!important;word-wrap:normal!important}
        </style>
        <?php
    }
    //初始化注入脚本
    public static function footer()
    {
        $settings = Helper::options()->plugin('Enlighter');
        $url = Helper::options()->pluginUrl . '/Enlighter/static/';
        echo '<script src="' . $url . 'enlighterjs.min.js"></script>';
        ?>
        <script type="text/javascript">
            (function() {
                // 1. 清理 Typecho 嵌套标签
                document.querySelectorAll('pre code').forEach(function(el) {
                    var parent = el.parentNode;
                    if (parent.tagName === 'PRE') { parent.textContent = el.textContent; }
                });

                // 2. 初始化
                try {
                    EnlighterJS.init('pre', null, {
                        language: 'javascript',
                        theme: '<?php echo $settings->theme; ?>',
                        indent: 4,
                        textOverflow: 'scroll', // 强制滚动，不换行
                        showLinenumbers: <?php echo $settings->linenumbers; ?>,
                        rawButton: true,
                        copyButton: <?php echo $settings->copyButton; ?>,
                        windowButton: <?php echo $settings->windowButton; ?>,
                        infoButton: false
                    });
                } catch (e) { console.error('EnlighterJS Init Failed'); }
            })();
        </script>
        <?php
    }
}

结语

改那个去广告，差点把人整神！乱七八糟的，看的脑瓜子疼，但是它的功能强大，又给人留下深刻印象！我严重怀疑作者写的时候都写懵了！