Beauty of front end--List of front end tools used by GitHub

6,529 0
Summary

GitHub's front-end architecture relies on a comprehensive set of open-source tools, particularly for rendering Markdown and highlighting code. For styling, it utilizes SCSS and KSS, while CoffeeScript manages interactive behaviors. GitHub Flavored Markdown is rendered by RedCarpet, which leverages the C-based Sundown library, with Pygments handling code highlighting. The platform further integrates tools like GitHub-Linguist for language recognition, Ace for its online editor, Gollum for Git-backed wikis, D3 for data visualization, Jekyll for static site generation, and Gemoji for emoji support.

I did this summarization when I added Lirate_CoffeeScript support for GitHub-Linguist, i.e how does GitHub do Marjdown render and code highlight in its front end.

Lots of font end tools used by GitHub are open sourced. They are:

1. HTML/CSS/JavaScript

1.1 HTML template

GitHub markup and template styleguide : https://github.com/styleguide/templates

1.2 Style and CSS

GitHub uses replacement of CSS:

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

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

GitHub CSS styleguide : https://github.com/styleguide/css

1.3 Behavior and JavaScript

GitHub uses CoffeeScript:

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

GitHub JavaScript styleguide : https://github.com/styleguide/javascript

2. GitHub Flavored Markdown and rendering engine

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

The rendering engine which supports GitHub Flavored Markdown.

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

The core library of RedCarpet is implemented in C, named Sundown:

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

3. Markup rendering framework

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

4. Code highlight rendering

A code highlight tool based on Python named Pygments:
Pygments.rb：https://github.com/tmm1/pygments.rb

5. Language recognition

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

6. Online editor

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

7. Wiki framework based on Git

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

8. Data visualization tool

D3：https://github.com/github/d3

9. GitHub Pages/Static website generator

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

10. Emotion icon tool

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

Source : http://www.soimort.org/posts/143/

GITHUB TOOL FRONT END

  RELATED

  COMMENTS

0

No comment for this article.