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

5顶
1踩

开源软件

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

2013-03-05 15:18 by 副主编 WnouM 评论(1) 有8659人浏览
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的优质项目，包括测试、前端、算法、书籍、面试、语言等

  • 2025年前端面试题汇总

    初始化——全局定义，可以将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地址：...

  • 基于SpringBoot+Vue的“智慧食堂”设计与实现（Java毕业设计，包括源码、数据库、教程）.zip

    Java 项目， Java 毕业设计，Java 课程设计，基于 SpringBoot 开发的，含有代码注释，新手也可看懂。毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。 包含：项目源码、数据库脚本、软件工具等，前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。 项目都经过严格调试，确保可以运行！ 1. 技术组成 前端：html、javascript、Vue 后台框架：SpringBoot 开发环境：idea 数据库：MySql（建议用 5.7 版本，8.0 有时候会有坑） 数据库工具：navicat 部署环境：Tomcat（建议用 7.x 或者 8.x 版本）， maven 2. 部署 如果部署有疑问的话，可以找我咨询 Java工具包下载地址： https://pan.quark.cn/s/eb24351ebac4 后台路径地址：localhost:8080/项目名称/admin/dist/index.html 前台路径地址：localhost:8080/项目名称/front/index.html （无前台不需要输入）

  • 历届奥运会奖牌数据（1896-2024年）.xlsx

    本次分享的数据为1896年-2024年（从雅典到巴黎）间奥运会奖牌数据，包括年份、届次、国家地区、名次、金牌、银牌、铜牌等数据，含免费下载链接 ## 一、数据介绍 数据名称：历届奥运会奖牌数据 数据范围：世界各国 样本数量：1877条 数据年份：1896年-2024年 数据说明：包括届次、国家、名次等数据

  • 基于SpringBoot+Vue的实习管理系统（Java毕业设计，包括源码、数据库、教程）.zip

    Java 项目， Java 毕业设计，Java 课程设计，基于 SpringBoot 开发的，含有代码注释，新手也可看懂。毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。 包含：项目源码、数据库脚本、软件工具等，前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。 项目都经过严格调试，确保可以运行！ 1. 技术组成 前端：html、javascript、Vue 后台框架：SpringBoot 开发环境：idea 数据库：MySql（建议用 5.7 版本，8.0 有时候会有坑） 数据库工具：navicat 部署环境：Tomcat（建议用 7.x 或者 8.x 版本）， maven 2. 部署 如果部署有疑问的话，可以找我咨询 Java工具包下载地址： https://pan.quark.cn/s/eb24351ebac4 后台路径地址：localhost:8080/项目名称/admin/dist/index.html 前台路径地址：localhost:8080/项目名称/front/index.html （无前台不需要输入）

  • 【人机交互】MATLAB直车道线检测.zip

    【人机交互】MATLAB直车道线检测

  • 基于SSM+JSP的KTV点歌系统+数据库（Java毕业设计，包括源码，教程）.zip

    Java 项目， Java 毕业设计，Java 课程设计，基于 SpringBoot 开发的，含有代码注释，新手也可看懂。毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。 包含：项目源码、数据库脚本、软件工具等，前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。 项目都经过严格调试，确保可以运行！ 1. 技术组成 前端：jsp 后台框架：SSM 开发环境：idea 数据库：MySql（建议用 5.7 版本，8.0 有时候会有坑） 数据库工具：navicat 部署环境：Tomcat（建议用 7.x 或者 8.x 版本）， maven 2. 部署 如果部署有疑问的话，可以找我咨询 Java工具包下载地址： https://pan.quark.cn/s/eb24351ebac4

Global site tag (gtag.js) - Google Analytics