强力推荐:EnlighterJS,纯JavaScript的语法高亮库
项目介绍
EnlighterJS 是一款轻量级且功能强大的开源 JavaScript 代码高亮库,设计目标是让在网页中展示美化后的代码变得简单易行。只需添加少量脚本和样式,即可实现对选定元素的高亮处理,并在所有现代浏览器上正常工作。
项目技术分析
EnlighterJS 的核心特性在于其高效能的分词引擎,基于优先级正则表达式,提供次级阶段的优化处理,保证了性能的同时,也使得扩展支持更多语言变得轻松。该库完全独立,无任何外部依赖,包括 Mootools 或 jQuery。此外,它还支持 Less 编写的可定制主题,并采用 JSX 视图进行构建,结合最小化的 DOM 库,确保代码简洁高效。通过 gulp 工具,实现了 ES6 到 ES5 的转换和 rollup.js 打包。
项目及技术应用场景
EnlighterJS 可广泛应用于各种需要展示代码的场合,例如:
- 博客和教程网站,帮助读者更好地理解示例代码。
- 开发文档,为代码片段提供清晰的视觉引导。
- 在线编程教育平台,提升学习体验。
- 个人网站或项目页面,展示项目源码。
项目特点
- 全浏览器兼容性:EnlighterJS 能在所有现代浏览器上运行,无需考虑服务器环境。
- 零依赖:纯 JavaScript 实现,不依赖任何其他库。
- 广泛的语言支持:涵盖40种不同语言及格式,如 C/C++, Java, Python, JSON 等。
- 丰富主题:内置12款高质量主题,满足不同风格需求。
- 便捷的代码组:通过代码组功能,可在标签页中展示多个代码块。
- 突出重要行:可以标记代码中的特定行。
- 体积小:JS 文件仅45KB(所有语言),单个主题的 CSS 为10KB(所有主题共60KB)。
- 一键高亮:一个命令即可完成整个页面的代码高亮。
快速启动
- 下载最新版 EnlighterJS。
- 将
dist/
目录下的文件复制到你的公共 HTML 位置。 - 引入 CSS 和 JS 文件。
- 标记需要高亮的代码块(比如预格式化文本标签
pre
加上data-enlighter-language
属性)。 - 初始化高亮。
EnlighterJS 提供了一个简单示例,帮助你快速上手:
<!-- ... -->
<script type="text/javascript">
// 初始化高亮 - 基于 CSS3 选择器
// 高亮所有 pre + code 标签
// 使用 javascript 作为默认语言
// 使用 'enlighter' 主题
// 替换制表符为空格
EnlighterJS.init('pre', 'code', {
language: 'javascript',
theme: 'enlighter',
indent: 2
});
</script>
<!-- ... -->
加入开源社区,一起享受优雅的代码显示带来的乐趣!EnlighterJS 非常欢迎你的贡献,访问 GitHub 获取更多信息。
创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考