15個原始碼語法著色來美化你的程式碼
本文作者是Gavin McLeod,一個被困在《電子世界爭霸戰》裡的骨灰級Web極客。在文中列舉了15個幫助開發者快速編碼、優化程式碼的語法高亮工具,每個高亮工具都有其功能特色。(以下是編譯內容)
開發者和頑固的程式碼極客深知Code Syntax Highlighter(以下簡稱“程式碼語法高亮工具”)作為二級符號的一種形式,便於在一個結構化語言或標記語言裡書寫程式碼。有些程式碼高亮編輯器裡融合了多個語法高亮功能,例如拼寫檢查、程式碼摺疊。語法高亮工具可以在總體策略的使用上起到較大的作用:改善文字的可讀性和上下文語境,尤其是在內碼表數較多的情況下。另外還能幫助開發者快速在程式設計過程中定位bug源頭。
不管你是一個程式碼極客還是一個吊兒郎當的碼農,下面為你提供的程式碼語法高亮工具保證能讓你寫的程式碼煥然一新。
1. Prism
Prism是一個只有1.5KB大小的壓縮版輕量級工具,能夠簡單方便的整合到CSS和JavaScript檔案裡,執行速度很快。已經使用在Dabblet裡(一個互動式的CSS場地)美化了很多程式碼,所以說Prism很穩定。新的程式語言也可以加入進來,在使用這個外掛架構的前提下,新加入的語言功能性將不斷提升;外觀風格和使用感覺都可以通過CSS來設計。
2. Rainbows
Rainbow是一款用JavaScript指令碼編寫的只有1.4KB的輕量級工具。它只需要在有必要高亮顯示的語言上使用JavaScript模型來保持事情簡單化就可以了。同樣,顏色和字型可以通過CSS主題支援來完全自定義。
3. Snippet
Snippet是一個jQuery外掛,建立在SHJS指令碼的頂部以此來高亮顯示HTML檔案裡的原始碼。它支援很多種類的指令碼語言:JavaScript、SQL、PHP和Ruby等等。其包含39個內建的獨一無二的配色圖案,可以不斷的變換除錯。
4. Geshi
這是一個高度自定義的語法高亮顯示工具,可以在網頁裡用來更好的展示程式碼片段。Geshi經過開發後來應用在phpBB論壇軟體上,但在功能特性上仍然是分開使用的。此外,這個語法高亮工具支援幾乎所有的流行程式語言,像ActionScript、ASP、C、JAVA、PHP、Ruby和SQL等等。
5. Syntax Highlighter
Syntax Highlighter幫助一個開發者/碼農輕鬆線上公佈程式碼片段,而且程式碼的外觀看上去也很不錯。說白了,它就是一個100%建立在JavaScript基礎上的高亮顯示工具,不用考慮伺服器上有什麼其他東西。支援多款程式語言,壓縮後的核心庫只有11KB大小。然而,Syntax Highlighter並不具備編寫高亮程式碼的能力,也不為使用者提供編寫原始碼的能力。
6. Google Code Prettify
這是在Google Code網站使用的指令碼。這個指令碼能夠自動查出正在使用的程式語言,進行相應的美化。同時也可以通過CSS來自定義。
7. Hightlight.js
Hightlight.js基本上不需要採用複雜的步驟就可以使用了,因為它的自動化程度很高:找出程式碼塊,檢測語言,高亮顯示一下就行了。它已經開始支援第三方應用程式,並提供Firefox擴充套件程式用於檢視程式碼,但是沒有語法高亮顯示。
8. SHJS:Syntax Highlighting in JavaScript
SHJS是一個JavaScript程式,它可以高亮顯示在HTML文件裡的原始碼段落。檔案使用SHJS將會通過web瀏覽器高亮顯示在客戶端。這就賦予了SHJS一項功能,那就是能夠高亮顯示原始碼是使用不同的語言編寫的。
9. Quick Highlighter
這個線上高亮工具提供許多編碼語言,你可以選擇多個選項將這些編碼語言集體高亮顯示。在高亮顯示程式碼、Combine Style、HTML Code、Highlight內建關鍵詞、資料型別、Strict Mode和Wrap過剩文字之前你可以選擇檢查或者不檢查程式碼。
10. Ultraviolet
Ultraviolet是一個執行在Ruby上的語法高亮引擎,支援50種以上的程式語言和20種以上的主題。
11. Pygments:Python Syntax Highlighter
這款語法高亮工具是用Python構建的,支援大部分的程式語言、多種輸出格式,它還可以被當作是一個命令列工具或者是一個類庫來使用。
12. Lighter for MooTools
Lighter是一個免費的語法高亮工具,專門為MooTools而開發的。MooTools開發者在建立Lighter之初運用了許多框架結構上的功能特點。它運用起來就像是在網頁上新增一個單獨的指令碼那樣簡單,選擇你想要高亮顯示的元素,Lighter會自動處理其餘部分。
13. CodePress
CodePress是一個基於網路的原始碼編輯器,帶有用JavaScript編寫的語法高亮工具,隨著在瀏覽器裡連續打字,文字的顏色會實時發生變化。除此以外,它還有程式碼片段、自動完成、快捷方式和多視窗功能。
14. Beauty of Code
這個jQuery語法高亮外掛使用的是Alex Gorbatchev裡的語法高亮顯示,但有一點不一樣:它能夠產生更多的xhtml相容的程式碼。
15. Jush JavaScript Syntax Highlighter
JavaScript Syntax Highlighter可以用在客戶端的語法高亮程式裡,支援的語言有HTML、CSS、JavaScript、PHP、SQL、HTTP、SMTP協議、php.ini和Apache配置。
英文原文:CodeGeekz
相關文章
- 用 Prettier 美化程式碼
- 使用 ESLint + Prettier 美化程式碼EsLint
- 使用htmlprettify美化您的HTML程式碼HTML
- SpringBoot3中15個案例原始碼Spring Boot原始碼
- Prettier美化css/scss/sass程式碼CSS
- table表格美化程式碼例項
- 15個小技巧,助你原始碼閱讀事半功倍原始碼
- 七個不一樣的Python程式碼寫法,讓你寫出一手漂亮的程式碼Python
- 成語答題小程式原始碼原始碼
- ??Mybatis原始碼我搞透了,面試來問吧!寫了134個原始碼類,1.03萬行程式碼!MyBatis原始碼面試行程
- mysql語法使用詳細程式碼版MySql
- Dart語法篇之集合的使用與原始碼解析(二)Dart原始碼
- 美化滾動條效果程式碼例項
- 200 行 Python 程式碼做個換臉程式(附原始碼)Python原始碼
- 別讓程式碼愁白頭髮!15 個 Python 函式拯救你的開發生活Python函式
- Ruby 2.x 原始碼學習:語法分析 & 中間程式碼生成 之 資料結構原始碼語法分析資料結構
- 通達信美化RSI波段指標公式原始碼指標公式原始碼
- 好程式設計師寫出來的程式碼,就叫好程式碼嗎?你錯了!程式設計師
- 【.NET基礎】Linq常用語法程式碼演示
- 【指令碼】shell語法指令碼
- 每日程式碼系列(15)
- React原始碼解析(1):jsx語法是如何解析React原始碼JS
- PostgreSQL 原始碼解讀(15)- Insert語句(執行過程跟蹤)SQL原始碼
- 15行Python程式碼,幫你理解令牌桶演算法Python演算法
- 分享一個奇怪得程式碼寫法
- 用異常處理來精簡你的程式碼
- 使用職責鏈模式來重構你的程式碼模式
- DRF類檢視讓你的程式碼DRY起來
- PostgreSQL 原始碼解讀(237)- 後臺程式#15(rebuild_database_list)SQL原始碼RebuildDatabase
- [原始碼-webpack01-前置知識] AST抽象語法樹原始碼WebAST抽象語法樹
- 15行CSS程式碼 就可以讓你的手機軟重啟CSS
- 【實用小技巧】idea程式碼格式美化快捷鍵Idea
- 程式碼來構建一個簡單的compilerCompile
- 個人來開發短影片程式原始碼,先來看一下開發思路原始碼
- 混亂C原始碼的幾個錯誤,你犯了嗎?原始碼
- Emmet快速語法—助力HTML/CSS一行程式碼一個頁面HTMLCSS行程
- 從程式碼生成說起,帶你深入理解 mybatis generator 原始碼MyBatis原始碼
- 在家天天敲程式碼很是枯燥 樂趣分享:盤點15個程式設計師搞笑段子 來看看程式設計師
- 拯救你的Go程式碼Go