前端之美——GitHub前端工具鏈整理匯總

 來源：Soimort

給GitHub-Linguist添加Literate CoffeeScript支持的時候稍稍總結了一下這個問題，即GitHub是怎樣在前端渲染它的Markdown和處理代碼高亮的。

大體上似乎是這個流程：

GitHub在前端用到的一系列工具基本上都是開源的。現簡單地整理如下。

1. HTML / CSS / JavaScript

1.1. HTML模板

GitHub的標記 & 模板風格指南：https://github.com/styleguide/templates

1.2. 樣式 & CSS

GitHub使用的CSS替代品是

• SCSS：https://github.com/nex3/sass

採用文檔框架

• KSS：https://github.com/kneath/kss

GitHub的樣式 & CSS風格指南：https://github.com/styleguide/css

1.3. 行為 & JavaScript

GitHub使用的JavaScript替代品是

• CoffeeScript：https://github.com/jashkenas/coffee-script

GitHub的行為 & JavaScript風格指南：https://github.com/styleguide/javascript

2. GitHub Flavored Markdown和渲染引擎

GitHub使用的Markdown是對原標準的一個擴展集：

• GitHub Flavored Markdown: https://github.com/github/github-flavored-markdown

支持GitHub Flavored Markdown的渲染引擎：

• RedCarpet：https://github.com/vmg/redcarpet

RedCarpet的核心庫是用C實現的，叫做Sundown（RedCarpet是Sundown的Ruby wrapper）：

• Sundown：https://github.com/vmg/sundown

Sundown項目已經中止開發。GitHub正在計劃與Reddit、StackOverflow、Meteor協作開發一個統一的Markdown標準，以及一個相應的輕量級、快速的、高安全性的渲染引擎。發布時間預期為去年年底（或者今年年底？）。關於該替代品的開發狀況，目前尚無可靠消息得以確認。

3. 標記語言渲染框架

GitHub用來渲染各種文本標記語言的框架（支持多種主流的輕量級標記語言，如Markdown、Textile、RDoc、Org mode、reStructuredText、AsciiDoc等，依賴於具體的引擎來完成。例如對Markdown的渲染依賴於RedCarpet）：

• GitHub-Markup：https://github.com/github/markup

4. 代碼高亮渲染

基於Python的代碼高亮工具Pygments的一個Ruby wrapper：

• Pygments.rb：https://github.com/tmm1/pygments.rb

取代了原來的Albino: https://github.com/github/albino

5. 語言識別

GitHub用它來識別代碼庫中的語言（屬於何種程序語言 或 文本標記語言）：

• GitHub-Linguist：https://github.com/github/linguist

這個庫也決定了GitHub的Top Languages頁面中哪些編程語言將會被展示出來。

對於程序語言，GitHub將調用Pygments.rb對代碼進行高亮處理；

對於文本標記語言，GitHub將把文件交由GitHub-Markup進行渲染。

6. 在線編輯器

在線代碼編輯功能使用的是Ace（Ajax.org Cloud9 Editor）。這是一個非GitHub項目：

• Ace：https://github.com/ajaxorg/ace

7. 基於Git的Wiki框架

用於託管GitHub的項目Wiki：

• Gollum：https://github.com/github/gollum

8. 數據可視化框架

用於渲染Contribution graphs / Network graphs等頁面的可視化效果：

• D3：https://github.com/github/d3 （fork自mbostock/d3）

9. GitHub Pages / 靜態網站生成器

GitHub Pages託管服務使用的靜態網站生成器：

• Jekyll: https://github.com/mojombo/jekyll

（Jekyll並非GitHub的官方項目，沒有使用GitHub-Markup作為其渲染框架。在最近的版本中才開始支持使用RedCarpet作為其Markdown引擎。）

10. 繪文字 

GitHub官方指定繪文字表情（詳細列表參見http://www.emoji-cheat-sheet.com/）：

• Gemoji: https://github.com/github/gemoji

（這一套通用的繪文字同時也被Campfire和Trac等支持。）