程式碼語法高亮

📐 工作原理與說明
按語言詞法規則為程式碼著色,提升可讀性。

💻 Code Syntax Highlighting

Highlight source code with syntax colors in your browser — paste code and copy formatted HTML.

輸出預覽 淺色主題
點選「高亮渲染」按鈕,或「載入示例」快速體驗
🎨 工具介紹 ▼

程式碼語法高亮工具是一款純前端實現的程式碼著色工具,內建簡易詞法分析引擎,無需引入 highlight.js、Prism 等第三方庫。支援 JavaScript、HTML、CSS、Python、JSON、SQL、Markdown 七種語言,可區分關鍵字、字串、註釋、數字、函式名、運算子等語法元素並著色顯示。

🔥 功能特點

📋 使用場景

📚 深度解析:程式碼語法高亮

💡 常見使用場景

高亮
`print(1)` → 關鍵字/函式著色的 <code>。

❓ 常見問題(FAQ)

支援哪些語言?
常見語言均支援,指定 lang 更準。
高亮後的 HTML 體積大嗎?
會比純文本大不少——每個 token 都被包進 span 標籤,程式碼量越大、語言規則越細,標籤佔比越高。若要控制體積,可只高亮關鍵行,或改用執行時高亮讓 HTML 保持精簡,代價是引入 JS 依賴與首屏閃爍。
⚠️ 使用說明與注意事項