代码高亮生成器

这个工具可以帮助您美化代码，添加语法高亮，并生成可以分享的HTML代码片段。支持多种编程语言和主题风格。

编程语言
主题风格
选项
输入代码
预览效果

关于代码高亮生成器

代码高亮可以让代码更易于阅读和理解，特别是在博客文章、教程或技术文档中分享代码时。

使用此工具，您可以：

  • 为代码添加语法高亮，支持多种编程语言
  • 选择不同的主题风格，适应不同的网站设计
  • 添加行号，使代码更易于参考
  • 生成HTML代码，可以嵌入到您的网站或博客中
  • 一键复制格式化后的代码或HTML

本工具使用 highlight.js 库提供语法高亮功能，所有处理都在浏览器中完成，您的代码不会上传到服务器。

`; htmlOutput.value = html; htmlOutput.style.display = 'block'; htmlOutput.select(); }); // 复制高亮代码 new ClipboardJS('#copy-output', { text: function() { return highlightedCode.textContent; } }).on('success', function(e) { const originalText = copyOutputBtn.innerHTML; copyOutputBtn.innerHTML = '已复制!'; setTimeout(function() { copyOutputBtn.innerHTML = originalText; }, 2000); }); // 高亮代码函数 function highlightCode() { const code = codeInput.value; const language = languageSelect.value; const showLineNumbers = lineNumbersCheckbox.checked; if (!code.trim()) { highlightedCode.textContent = ''; return; } highlightedCode.textContent = code; if (language !== 'auto') { highlightedCode.className = `language-${language}`; } else { highlightedCode.className = ''; } hljs.highlightElement(highlightedCode); const pre = highlightedCode.parentElement; if (showLineNumbers) { pre.classList.add('line-numbers'); } else { pre.classList.remove('line-numbers'); } } // HTML转义函数 function escapeHtml(text) { return text .replace(/&/g, '&') .replace(//g, '>') .replace(/"/g, '"') .replace(/'/g, '''); } });