EnlighterJS：开源语法高亮神器，让你的代码更出彩

2024-09-16 17:04:08作者：申梦珏Efrain

项目介绍

EnlighterJS 是一款开源的语法高亮工具，完全基于纯 JavaScript 编写。它能够轻松地将你的代码片段转换为美观、易读的格式，提升文档和博客的专业度。EnlighterJS 的设计理念是简单易用，只需在网页中添加一个脚本和一个样式表，选择你想要高亮的元素，EnlighterJS 就会自动完成剩下的工作。

项目技术分析

EnlighterJS 的技术架构非常先进，具有以下核心技术特点：

零依赖：EnlighterJS 是一个独立的库，不需要依赖其他框架如 MooTools 或 jQuery，这使得它的集成更加简单和轻量。
高性能：采用了基于优先级正则表达式的超快分词引擎和第二阶段分词器，确保了高亮处理的效率。
可定制主题：主题完全可定制，使用 Less 编写，并且可以作为单独的 CSS 文件使用，减少了资源占用。
现代构建工具：使用 Gulp 进行构建，ES6 代码通过 Babel 转译，并使用 Rollup.js 进行打包。

项目及技术应用场景

EnlighterJS 适用于多种场景，包括但不限于：

技术博客：在博客中展示代码片段，提升阅读体验。
文档编写：在技术文档中高亮代码，使文档更加清晰易懂。
在线教程：在教程中展示代码，帮助学习者更好地理解。
代码分享平台：在代码分享网站中使用，提升代码展示的专业度。

项目特点

EnlighterJS 具有以下显著特点：

多语言支持：支持 40 多种编程语言和格式，涵盖了几乎所有主流编程语言。
多主题选择：提供 12 种高质量主题，满足不同用户的审美需求。
轻量级：极小的资源占用，JS 文件仅 45KB，CSS 文件仅 10KB。
易用性：只需几行代码即可完成初始化，适合各种技术水平的用户。
开源免费：基于 Mozilla Public License 2.0 开源协议，用户可以自由使用和修改。

快速开始

下载最新的 EnlighterJS 发布版本。
将 dist/ 目录中的文件复制到你的公共 HTML 目录。
在页面中引入 CSS 和 JS 文件。
使用 data-enlighter-language 属性标记你想要高亮的代码块。
初始化高亮功能。

最小示例

以下是一个最小化的示例，展示了如何使用 EnlighterJS 高亮代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>EnlighterJS Test</title>

    <!-- EnlighterJS Resources !-->
    <link rel="stylesheet" href="enlighterjs.min.css" />
</head>
<body>

    <main>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore 
            et dolore <code>window.addEvent('domready', async (a,b) => {});</code> magna aliquyam erat.
        </p>

        <!-- Code to hghlight !-->
        <pre data-enlighter-language="less">
// buttons used in codegroups + toolbar
.enlighter-btn{
    display: inline-block;
    margin: 0px 5px 0px 5px;
    padding: 3px 5px 3px 5px;
    border: solid 1px #333333;
    background-color: #f0f0f0;
    cursor: pointer;
}

// buttons
.enlighter-btn-raw{
    background-image: data-uri('icons/enlighter_code.svg');
}

.enlighter-btn-window{
    background-image: data-uri('icons/enlighter_rawcode.svg');
}

.enlighter-btn-website{
    background-image: data-uri('icons/enlighter_icon_white.svg');
}
        </pre>

    </main>

    <script type="text/javascript" src="enlighterjs.min.js"></script>
    <script type="text/javascript">
        // INIT CODE - simple page-wide initialization based on css selectors
        // - highlight all pre + code tags (CSS3 selectors)
        // - use javascript as default language
        // - use theme "enlighter" as default theme
        // - replace tabs with 2 spaces
        EnlighterJS.init('pre', 'code', {
                language : 'javascript',
                theme: 'enlighter',
                indent : 2
        });
    </script>
</body>
</html>