资讯频道 → 开源软件
阅读更多

5顶
1踩

开源软件

转载新闻 前端之美——GitHub前端工具链整理汇总

2013-03-05 15:18 by 副主编 WnouM 评论(1) 有8594人浏览
github 前端 工具 web
GitHub是怎样在前端渲染它的Markdown和处理代码高亮的？大体上似乎是这个流程： 

输入: 代码文本
GitHub-Linguist 判断代码语言
case 代码语言 of
   程序语言 => Pygments 全部代码高亮处理
 | 文本标记语言 =>
       GitHub-Markup 渲染框架
           RedCarpet / RedCloth / ... 文本渲染
           Pygments 代码块高亮处理
       end
输出: HTML文本

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等支持。）
来自: Soimort.org
5
顶
1
踩
评论 共 1 条 请登录后发表评论
1 楼 lihao312 2013-03-06 09:11
这么多开源的

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Global site tag (gtag.js) - Google Analytics