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

5顶
1踩

开源软件

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

2013-03-05 15:18 by 副主编 WnouM 评论(1) 有8549人浏览
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
这么多开源的

发表评论

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

相关推荐

  • GitHub优质项目汇总——程序员必知.zip

    学姐整理了超超超多，令人称赞的GitHub的优质项目，包括测试、前端、算法、书籍、面试、语言等

  • 2024年前端面试题汇总

    初始化——全局定义，可以将eventBus绑定到vue实例的原型上,也可以直接绑定到window对象上. //main.js Vue.prototype.$EventBus = new Vue(); 触发事件 this.$EventBus.$emit('eventName', param1,param2,...) 监听...

  • 尚硅谷前端框架——Vue学习笔记

    ─ src │ ├── assets: 存放静态资源 │ │ └── logo.png │ │── component: 存放组件 │ │ └── HelloWorld.vue │ │── App.vue: 汇总所有组件 │ │── main.js: 入口文件 ├── .gitignore: git...

  • Web前端工程师成长之路——知识汇总

    web前端工程师  分类： Web开发应用 一、何为Web前端工程师？    前端工程师，也叫Web前端开发工程师。他是随着web发展，细分出来的行业。Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/DOM/Flash等...

  • github大佬呕心沥血整理的2020年前端面试复习必读精选文章【赠复习导图】

    2021年前端面试必读文章【超三百篇文章/赠复习导图】 转载。原文链接 哈哈，之前是 2020 年必读文章，到了 2021 年了，感觉这些文章还都是经典，那就改个标题吧。[手动狗头] 前言 之前写过一篇 一年半经验如何...

  • github上有哪些值得关注学习的前端项目？

    以下是github上一些有着高Star值得学习的前端项目，希望对你有帮助~

  • 前端常用插件、工具类库汇总，不要重复造轮子啦！！！

    HTML5 & FLASH 文件上传 代码高亮 hightlight：highlightjs.org/ 前端国际化 i18n i18next：github.com/i18next/i18… vue-i18n：github.com/kazupon/vue… 前端系列——jquery.i18n.properties前端国际化解决方案...

  • 前端工具、书籍整理

    前端工具 自动化：Gulp、 Grunt、百度Fis、Ant、Yeoman、Codekit、Koala、Webpack 预编译：Slim、Haml、Coffeescript、Sass、BabelJs、Jade、Less、Stylus、Pleeease、PostCSS、 查找工具：CssTriggers、...

  • 14万字面试题汇总整理，祝你顺利斩获大厂前端offer

    导读：最近很多小伙伴私信我说，一般大厂的前端面试题都有哪些，应该如何准备，要不要刷题等等，这里孙叫兽简单给大家总结一下前端的高频面试题，如果对你有帮助，记得点赞评论+收藏。现在很多大厂都比较内卷，你不...

  • 适合 JS 新手学习的开源项目——在 GitHub 学编程

    这里是 HelloGitHub 的《GitHub 上适合新手的开源项目》系列的最后一篇，系列文章： C++ 篇 Python 篇 Go 篇 Java 篇 JavaScript 篇 Java 篇中老荀说到当今互联网份额最大的编程语言是 Java，作为后辈我对此话是...

  • 前端最全面试题整理（持续更新）

    题比较全，但是原版很多题的答案不是很清晰，在此基础上我重新补充了一下 最近应该会持续的把这些题的答案更新完 2023.2.17 目录 写在前面 前端基础 一、 HTTP/HTML/浏览器P 1、说一下 http 和 https (1) http 和 ...

  • 网络编程资源大集合(包含前端、java、linux、安卓、github开源项目、开发工具等)

    安卓各组件介绍一、ListView二、ActionBar三、Menu四、ViewPager 、Gallery五、GridView六、ImageView七、ProgressBar八、其他2.GitHub上优秀Android开源项目3. Android开发神器1.Xabber客户端2.oschina客户端3.手机...

  • 【前端&后端&运维】Web开发人员学习路线，汇总整理

    ——————————————————前端———————————————————— ———————————————————————————————————————— ——————————————————...

  • 在GitHub上收集的最全的前端资源汇总（包括前端学习、前端开发资源、前端求职面试等）

    在GitHub上收集的最全的前端资源汇总（包括前端学习、前端开发资源、前端求职面试等）个人结合github上各位大神分享的资源进行了简单的汇总整理，每一个条目下面都有丰富的资料，是前端学习、工作的好帮手。...

  • 2019上半年总结——Github上那些Java面试、学习相关仓库

    分享一下最近逛Github看到了一些对于Java面试以及学习有帮助的仓库，这些仓库涉及Java核心知识点整理、Java常见面试题、算法、基础知识点比如网络和操作系统等等。 知识点相关 1.JavaGuide Github地址：...

  • Java实战项目——基于ssh实现的博客系统（毕业设计）(前后端源码+论文+数据库+说明文档)25.zip

    ava实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），可运行高分资源 Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现

  • 基于React的后台开发框架（javascript）

    【作品名称】：基于React的后台开发框架（javascript） 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】：运行Demo cd tui/example npm install node app.js open localhost:3003/be 说明 simditor文件夹为TUI依赖的编辑器插件，如果用到编辑器，页面引入simditor.all.min.js和simditor.css即可。

  • 吴力群 231123501129.pdf

    吴力群 231123501129.pdf

  • PC下C语言基于libgraphics和浙江大学simplegui写出的新版吃豆人，仅用于教学和交流.zip

    C语言是一种广泛使用的编程语言，它具有高效、灵活、可移植性强等特点，被广泛应用于操作系统、嵌入式系统、数据库、编译器等领域的开发。C语言的基本语法包括变量、数据类型、运算符、控制结构（如if语句、循环语句等）、函数、指针等。下面详细介绍C语言的基本概念和语法。 1. 变量和数据类型 在C语言中，变量用于存储数据，数据类型用于定义变量的类型和范围。C语言支持多种数据类型，包括基本数据类型（如int、float、char等）和复合数据类型（如结构体、联合等）。 2. 运算符 C语言中常用的运算符包括算术运算符（如+、、、/等）、关系运算符（如==、!=、、=、<、<=等）、逻辑运算符（如&&、||、！等）。此外，还有位运算符（如&、|、^等）和指针运算符（如、等）。 3. 控制结构 C语言中常用的控制结构包括if语句、循环语句（如for、while等）和switch语句。通过这些控制结构，可以实现程序的分支、循环和多路选择等功能。 4. 函数 函数是C语言中用于封装代码的单元，可以实现代码的复用和模块化。C语言中定义函数使用关键字“void”或返回值类型（如int、float等），并通过“{”和“}”括起来的代码块来实现函数的功能。 5. 指针 指针是C语言中用于存储变量地址的变量。通过指针，可以实现对内存的间接访问和修改。C语言中定义指针使用星号（）符号，指向数组、字符串和结构体等数据结构时，还需要注意数组名和字符串常量的特殊性质。 6. 数组和字符串 数组是C语言中用于存储同类型数据的结构，可以通过索引访问和修改数组中的元素。字符串是C语言中用于存储文本数据的特殊类型，通常以字符串常量的形式出现，用双引号（"..."）括起来，末尾自动添加'\0'字符。 7. 结构体和联合 结构体和联合是C语言中用于存储不同类型数据的复合数据类型。结构体由多个成员组成，每个成员可以是不同的数据类型；联合由多个变量组成，它们共用同一块内存空间。通过结构体和联合，可以实现数据的封装和抽象。 8. 文件操作 C语言中通过文件操作函数（如fopen、fclose、fread、fwrite等）实现对文件的读写操作。文件操作函数通常返回文件指针，用于表示打开的文件。通过文件指针，可以进行文件的定位、读写等操作。 总之，C语言是一种功能强大、灵活高效的编程语言，广泛应用于各种领域。掌握C语言的基本语法和数据结构，可以为编程学习和实践打下坚实的基础。

  • SQL语言教程，包含了所有基础的SQL语句

    SQL语言教程，包含了所有基础的SQL语句

Global site tag (gtag.js) - Google Analytics