Today's Question:  What are you most afraid of as a programmer?        GIVE A SHOUT

Technical Article => Web =>  Web design

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

  sonic0002      2013-03-07 03:46:42      3,864    0

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:

SCSShttps://github.com/nex3/sass

KSShttps://github.com/kneath/kss

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

1.3 Behavior and JavaScript

GitHub uses CoffeeScript:

CoffeeScripthttps://github.com/jashkenas/coffee-script

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

2. GitHub Flavored Markdown and rendering engine

GitHub Flavored Markdownhttps://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

D3https://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

  SAVE AS PDF   MARK AS READ   MARK AS IMPORTANT

Share on Facebook  Share on Twitter  Share on Google+  Share on Weibo  Share on Reddit  Share on Digg  Share on Tumblr    Delicious

  RELATED


  0 COMMENT


No comment for this article.


  WRITE ARTICLE

What is procedure programming?

By sonic0002
After viewing this picture, you should understand what procedure programming is. Want to install air conditioner at higher levels? Give them more ladders.