EnlighterJS 开源语法高亮器使用教程

1. 项目介绍

EnlighterJS 是一个开源的语法高亮器，使用纯 JavaScript 编写。它旨在为现代浏览器提供简单易用的语法高亮功能，无需服务器端支持。EnlighterJS 支持多种编程语言和格式，并提供多种高质量的主题，适用于各种开发场景。

主要特点

• 多语言支持：支持超过 40 种编程语言和格式。
• 多主题选择：提供 12 种高质量的主题，满足不同视觉需求。
• 内联语法高亮：支持内联代码的语法高亮。
• 代码组功能：支持将多个代码块分组显示。
• 轻量级：极小的脚本和样式文件，减少页面加载时间。

2. 项目快速启动

下载与安装

首先，从 GitHub 仓库下载 EnlighterJS：

git clone https://github.com/EnlighterJS/EnlighterJS.git

引入文件

将下载的文件中的 dist 目录下的 enlighterjs.min.js 和 enlighterjs.min.css 文件复制到你的项目中，并在 HTML 文件中引入：

<link rel="stylesheet" href="path/to/enlighterjs.min.css" />
<script type="text/javascript" src="path/to/enlighterjs.min.js"></script>

标记代码块

在你的 HTML 文件中，使用 pre 或 code 标签标记需要高亮的代码块，并添加 data-enlighter-language 属性指定语言：

<pre data-enlighter-language="javascript">
function helloWorld() {
    console.log("Hello, World!");
}
</pre>

初始化 EnlighterJS

在页面加载完成后，初始化 EnlighterJS：

<script type="text/javascript">
    // 初始化 EnlighterJS
    EnlighterJS.init('pre', 'code', {
        language: 'javascript',
        theme: 'enlighter',
        indent: 2
    });
</script>

3. 应用案例和最佳实践

案例1：博客文章中的代码高亮

在博客文章中，使用 EnlighterJS 高亮代码块，提升文章的可读性和专业性。

<pre data-enlighter-language="python">
def fibonacci(n):
    if n <= 1:
        return n
    else:
        return fibonacci(n-1) + fibonacci(n-2)
</pre>

案例2：文档中的代码示例

在技术文档中，使用 EnlighterJS 展示代码示例，帮助用户更好地理解代码逻辑。

<pre data-enlighter-language="java">
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}
</pre>

最佳实践

• 选择合适的主题：根据网站的整体风格选择合适的主题，保持一致性。
• 优化加载速度：使用压缩后的文件，减少页面加载时间。
• 自定义语言和主题：根据需要添加自定义的语言和主题，扩展 EnlighterJS 的功能。

4. 典型生态项目

EnlighterJS for WordPress

EnlighterJS 提供了官方的 WordPress 插件，方便在 WordPress 博客中使用 EnlighterJS 进行代码高亮。

• GitHub 仓库：EnlighterJS for WordPress

EnlighterJS for TinyMCE

EnlighterJS 还提供了 TinyMCE 编辑器的插件，方便在富文本编辑器中插入高亮代码。

• GitHub 仓库：EnlighterJS for TinyMCE

EnlighterJS for Gutenberg

EnlighterJS 支持 WordPress 的 Gutenberg 编辑器，提供更好的代码高亮体验。

• GitHub 仓库：EnlighterJS for Gutenberg

通过这些生态项目，EnlighterJS 可以无缝集成到各种内容管理系统中，提供一致的代码高亮体验。