前端之美：GitHub前端工具整理汇总

野性酷女 2022-09-22 11:49 208阅读 0赞

[![前端之美——GitHub前端工具链整理汇总][GitHub]][GitHub]

GitHub在前端用到的一系列工具基本上都是开源的。现简单地整理如下。

## 1. HTML / CSS / JavaScript ##

### 1.1. HTML模板 ###

GitHub的标记 & 模板风格指南：[https://github.com/styleguide/templates][https_github.com_styleguide_templates]

### 1.2. 样式 & CSS ###

GitHub使用的CSS替代品是

*  [SCSS][]：[https://github.com/nex3/sass][https_github.com_nex3_sass]

采用文档框架

*  [KSS][]：[https://github.com/kneath/kss][https_github.com_kneath_kss]

GitHub的样式 & CSS风格指南：[https://github.com/styleguide/css][https_github.com_styleguide_css]

### 1.3. 行为 & JavaScript ###

GitHub使用的JavaScript替代品是

*  [CoffeeScript][]：[https://github.com/jashkenas/coffee-script][https_github.com_jashkenas_coffee-script]

GitHub的行为 & JavaScript风格指南：[https://github.com/styleguide/javascript][https_github.com_styleguide_javascript]

## 2. GitHub Flavored Markdown和渲染引擎 ##

GitHub使用的Markdown是对原标准的一个扩展集：

*  [GitHub Flavored Markdown][]: [https://github.com/github/github-flavored-markdown][https_github.com_github_github-flavored-markdown]

支持GitHub Flavored Markdown的渲染引擎：

*  RedCarpet：[https://github.com/vmg/redcarpet][https_github.com_vmg_redcarpet]

RedCarpet的核心库是用C实现的，叫做Sundown（RedCarpet是Sundown的Ruby wrapper）：

*  Sundown：[https://github.com/vmg/sundown][https_github.com_vmg_sundown]

[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][https_github.com_github_markup]

## 4. 代码高亮渲染 ##

基于Python的代码高亮工具[Pygments][]的一个Ruby wrapper：

*  Pygments.rb：[https://github.com/tmm1/pygments.rb][https_github.com_tmm1_pygments.rb]

取代了原来的Albino: [https://github.com/github/albino][https_github.com_github_albino]

## 5. 语言识别 ##

GitHub用它来识别代码库中的语言（属于何种程序语言 或 文本标记语言）：

*  GitHub-Linguist：[https://github.com/github/linguist][https_github.com_github_linguist]

这个库也决定了GitHub的[Top Languages页面][Top Languages]中哪些编程语言将会被展示出来。

对于程序语言，GitHub将调用Pygments.rb对代码进行高亮处理；

对于文本标记语言，GitHub将把文件交由GitHub-Markup进行渲染。

## 6. 在线编辑器 ##

在线代码编辑功能使用的是[Ace（Ajax.org Cloud9 Editor）][Ace_Ajax.org Cloud9 Editor]。这是一个非GitHub项目：

*  Ace：[https://github.com/ajaxorg/ace][https_github.com_ajaxorg_ace]

## 7. 基于Git的Wiki框架 ##

用于托管GitHub的项目Wiki：

*  Gollum：[https://github.com/github/gollum][https_github.com_github_gollum]

## 8. 数据可视化框架 ##

用于渲染Contribution graphs / Network graphs等页面的可视化效果：

*  [D3][]：[https://github.com/github/d3][https_github.com_github_d3] （fork自[mbostock/d3][mbostock_d3]）

## 9. GitHub Pages / 静态网站生成器 ##

GitHub Pages托管服务使用的静态网站生成器：

*  Jekyll: [https://github.com/mojombo/jekyll][https_github.com_mojombo_jekyll]

（Jekyll并非GitHub的官方项目，没有使用GitHub-Markup作为其渲染框架。在最近的版本中才开始支持使用RedCarpet作为其Markdown引擎。）

## 10. 绘文字 ![metal.png][] ##

GitHub官方指定绘文字表情（详细列表参见[http://www.emoji-cheat-sheet.com/][http_www.emoji-cheat-sheet.com]）：

*  Gemoji: [https://github.com/github/gemoji][https_github.com_github_gemoji]

（这一套通用的绘文字同时也被Campfire和Trac等支持。）

[GitHub]: /images/20220721/a076e04d9caf4125bbcb163ee22ef5ea.png
[https_github.com_styleguide_templates]: https://github.com/styleguide/templates
[SCSS]: http://sass-lang.com/
[https_github.com_nex3_sass]: https://github.com/nex3/sass
[KSS]: http://warpspire.com/kss/
[https_github.com_kneath_kss]: https://github.com/kneath/kss
[https_github.com_styleguide_css]: https://github.com/styleguide/css
[CoffeeScript]: http://coffeescript.org/
[https_github.com_jashkenas_coffee-script]: https://github.com/jashkenas/coffee-script
[https_github.com_styleguide_javascript]: https://github.com/styleguide/javascript
[GitHub Flavored Markdown]: https://help.github.com/articles/github-flavored-markdown
[https_github.com_github_github-flavored-markdown]: https://github.com/github/github-flavored-markdown
[https_github.com_vmg_redcarpet]: https://github.com/vmg/redcarpet
[https_github.com_vmg_sundown]: https://github.com/vmg/sundown
[Sundown]: https://github.com/vmg/sundown/commit/37728fb2d7137ff7c37d0a474cb827a8d6d846d8
[https_github.com_github_markup]: https://github.com/github/markup
[Pygments]: http://pygments.org/
[https_github.com_tmm1_pygments.rb]: https://github.com/tmm1/pygments.rb
[https_github.com_github_albino]: https://github.com/github/albino
[https_github.com_github_linguist]: https://github.com/github/linguist
[Top Languages]: https://github.com/languages
[Ace_Ajax.org Cloud9 Editor]: http://ace.ajax.org/
[https_github.com_ajaxorg_ace]: https://github.com/ajaxorg/ace
[https_github.com_github_gollum]: https://github.com/github/gollum
[D3]: http://d3js.org/
[https_github.com_github_d3]: https://github.com/github/d3
[mbostock_d3]: https://github.com/mbostock/d3
[https_github.com_mojombo_jekyll]: https://github.com/mojombo/jekyll
[metal.png]: https://a248.e.akamai.net/assets.github.com/images/icons/emoji/metal.png
[http_www.emoji-cheat-sheet.com]: http://www.emoji-cheat-sheet.com/
[https_github.com_github_gemoji]: https://github.com/github/gemoji