EnlighterJS：让代码闪耀的二次元魔法指南

——献给所有想让代码闪闪发光的二次元开发者们 (≧▽≦)/~

1️⃣ 角色档案 ·「EnlighterJS」

• 属性 · 数值 · 说明
• 种族 · 纯前端 JS 小精灵 · 不需要后端 buff，CDN 召唤即上线
• 好感语言 · 40+（JS、Python、PHP…） · 覆盖主流 & 冷门技能树
• 装扮 · 12 套官方主题 + 任意换装 · 亮/暗、赛博粉、和风夜…随心切
• 奥义 · 自动识别、复制按钮、CodeGroup · 旁边还带贴心 UI 咒语
• 最新版本 · v3.x · 持续更新中，bug 被驱赶到异世界 ~

一句话简介：EnlighterJS 就像你的随身「光之魔导书」，让任何 <pre> & <code> 方块立刻闪耀彩色特效！✨ |280

2️⃣ 技能树 ·核心魔法解析

? 轻量召唤

目的：最快速度把 EnlighterJS「召唤」进网页，让代码马上变彩色。

1
2
3

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/enlighterjs/dist/enlighterjs.min.css">
<script src="https://cdn.jsdelivr.net/npm/enlighterjs/dist/enlighterjs.min.js"></script>
<script>EnlighterJS.init('pre', 'code');</script>

? 语言标记

目的：告诉 EnlighterJS「这段代码是什么语言」，以获得最准确的高亮。

1
2
3

<pre data-enlighter-language="javascript">
const neko = () => console.log('にゃー!');
</pre>

不写 data-enlighter-language 也行，但偶尔会把 C# 当骑士剑拔出砍到 Java，大意了 ~ |645

? 超·换装系统

目的：一行代码就能换「皮肤」+ 调整行为，让高亮条顺眼又好用。

1
2
3
4
5
6

EnlighterJS.init('pre', 'code', {
  theme: 'atom',          // 赛博蒸汽风
  indent: 2,              // 缩进两格，治愈强迫症
  showCopyButton: true,   // 一键复制，友谊小船说走就走
  toolbarOuter: false     // 隐藏外框，更干净
});

3️⃣ WordPress 联动 ·插件支

• Enlighter – Customizable Syntax Highlighter：
• Gutenberg/Classic Editor 双形态召唤阵
• 拖动色盘 + 滑块，DIY 专属主题 ✂️
• 每次大版本都会同步核心库，官方爸爸亲自维护，放心食用

类型插件

? 站点示例：插件大绵羊博客也是使用这个插件哟~

? 升级小贴士

4.x 开始 DOM 结构微调，若你的主题里有「深海巨型选择器」请记得把它们也进化哟~

4️⃣ 二次元炼金 ·自制主题 3

1. 官方 Theme Customizer：「所见即所得」少女心调色板?
2. 克隆 LESS & gulp：全自动打包，像在本地炼成 SSR 铠甲⚙️
3. 覆盖变量：线上再注入一小段 CSS，轻轻改变色调就行?

5️⃣ 进阶魔法 ·隐藏招式

• 招式 · 咒文片段 · 效果
• ✨ 延迟加载 · import('...enlighterjs').then(()=>EnlighterJS.highlight('pre')) · 用户滑到代码时才加载，首屏飞起
• ? 自定义语言 · EnlighterJS.registerLanguage('dragon', rules) · 为自家「龙语 DSL」点亮徽章
• ? 自动暗黑 · CSS @media (prefers-color-scheme: dark) · 随系统夜色切换，守护视力

虽然可能不用，都不能不懂

? 没有啦

无论你是热衷发光发亮的「赛博织梦者」，还是想给博客加点 Kirakira 效果的「咕噜咕噜魔法使」，EnlighterJS 都能成为你的「闪耀外挂」。 快把它收入背包，让每一行代码都像 OP 动画一样“啪”地闪出光效吧！

Now, Code On & Shine On! (๑•̀ㅂ•́)و✧