在此输入代码以查看高亮效果...本代码语法高亮工具操作简单且功能强大，以下是详细的使用指南：
粘贴代码：在左侧输入框中粘贴您需要高亮的代码片段。工具支持从任何代码编辑器、IDE或网页中复制代码后直接粘贴，无需任何预处理。
选择语言：在下拉菜单中选择代码的编程语言。如果启用了「自动检测」功能，工具会根据代码内容自动推断语言类型（例如通过文件扩展名、常见语法特征等）。目前支持JavaScript、HTML、CSS、Python、SQL、JSON、XML、Bash、PHP、Java、C、C++、Go、Rust、TypeScript、YAML、Markdown等20+种语言。
查看高亮：选择语言后，右侧预览区会实时显示语法高亮效果。关键字、字符串、注释、数字等都会以不同颜色区分，便于阅读和理解代码结构。
行号控制：通过「显示行号」开关可以控制预览区是否显示行号。关闭行号后更适合截图或复制到文档中使用。
导出HTML：点击「导出HTML」按钮，可将当前高亮后的代码导出为完整的HTML文件。导出的文件包含内联CSS样式，可直接嵌入到网页、博客或技术文档中使用，无需依赖外部样式库。
代码语法高亮工具在多个场景中都有广泛应用，以下是几个典型的使用场景：
技术博客写作：在撰写技术博客时，使用本工具生成带有语法高亮的代码片段HTML，直接嵌入到博客文章中。相比纯文本代码，带高亮的代码更易于读者理解，能显著提升文章的专业度和阅读体验。
代码分享与讨论：在团队协作或社区讨论中，将代码通过本工具高亮后分享，可以让同事或社区成员更快速地定位关键逻辑，减少沟通成本。特别是在代码审查（Code Review）过程中，高亮后的代码更易于发现问题。
教学与演示：教师和技术讲师在制作课件或技术演示时，使用本工具生成美观的代码示例。语法高亮可以帮助学生快速区分关键字、变量、注释等，提升教学效果。
文档编写：在编写API文档、技术规范或项目README时，将代码示例通过本工具高亮后嵌入，可以显著提升文档的可读性和专业性。
语法高亮原理：语法高亮是通过词法分析（Lexical Analysis）将代码文本分解为不同的token（标记），然后根据token的类型（如关键字、字符串、注释等）应用不同的颜色和样式。本工具使用正则表达式进行词法分析，为不同token类别添加对应的CSS类名，再通过CSS定义每种token的显示样式。
语法高亮的历史：最早的语法高亮出现在20世纪80年代的文本编辑器中。1983年，Larry Wall在开发Perl语言的vi编辑器时首次引入了语法高亮功能。如今，几乎所有现代IDE和代码编辑器都内置了语法高亮功能，成为程序员日常工作中不可或缺的一部分。
常见的语法高亮引擎：业界常用的语法高亮库包括Prism.js、Highlight.js、Shiki等。Prism.js以其轻量级和可扩展性著称；Highlight.js支持200+种语言，使用广泛；Shiki基于VS Code的语法高亮引擎，提供与编辑器一致的着色效果。本工具是一个轻量级的纯前端实现，无需加载外部库即可获得良好的高亮效果。
本工具支持20+种编程语言的语法高亮，包括：JavaScript、HTML、CSS、Python、SQL、JSON、XML、Bash/Shell、PHP、Java、C、C++、Go、Rust、TypeScript、YAML、Markdown等。每种语言都有专门设计的词法规则，能够准确识别关键字、字符串、注释、数字等token。
不会。本工具完全在浏览器端运行，所有代码处理（包括语法分析和样式渲染）都在本地完成，不会上传任何数据到服务器。您可以在没有网络连接的情况下使用本工具（页面加载后）。
在高亮预览区点击「导出HTML」按钮，即可将当前高亮后的代码导出为完整的HTML文件。导出的文件包含内联CSS样式，可以直接嵌入到网页、博客或技术文档中使用，无需依赖外部样式库。
可以。在控制面板中找到「显示行号」开关，关闭后预览区将不显示行号，方便您截图或复制纯代码内容。行号的显示状态不会影响导出的HTML文件。
是的。工具会根据代码内容自动检测编程语言（如文件扩展名、常见语法特征等）。自动检测的准确率对于大多数常见语言较高，但复杂的混合语言场景可能需要手动选择。您也可以随时通过下拉菜单手动指定语言。
工具对代码长度没有严格限制，但由于纯前端处理的性能限制，建议单次处理的代码不超过10万行。对于超大文件，建议分块处理。
当前版本提供了统一的深色主题配色方案。如果您需要自定义颜色，可以通过浏览器开发者工具修改CSS变量，或者在导出HTML后手动编辑CSS样式。
当前版本主要提供语法高亮功能，不包含代码格式化。如果您需要格式化代码，可以使用本工具矩阵中的「JSON格式化」「HTML格式化」「CSS格式化」等专用工具。
在此输入代码以查看高亮效果...';
updateStats();
}
// ========== Event Listeners ==========
document.getElementById('btnHighlight').addEventListener('click', doHighlight);
document.getElementById('btnCopy').addEventListener('click', copyCode);
document.getElementById('btnExportHTML').addEventListener('click', exportHTML);
document.getElementById('btnClear').addEventListener('click', clearAll);
codeInput.addEventListener('input', () => {
updateStats();
doHighlight();
});
langSelect.addEventListener('change', doHighlight);
lineNumCheck.addEventListener('change', doHighlight);
// Initial highlight
doHighlight();