在以前的推送中，我们曾经向大家介绍过一种简洁明了、学习容易、功能比纯文本更强的工具——Markdown
它的目标是实现「易读易写」，不仅可以用来写博客，在平常大家使用 Git 进行版本控制与协同合作的时候，写项目的文档也会用到
如果你还没有接触过 Markdown，或者记不清它的具体语法，可以点击下面这篇文章进行学习： 还没用过 Markdown 吗？那你就 OUT 了！ Markdown 的编辑器有很多，不同操作系统的 PC 有不同的客户端，还有不计其数的在线编辑器可以供大家使用
但是作为一个喜欢折腾的 Geek，如果可以为自己定制一个 Markdown 编辑器，也许会让自己平常的工作变得更加丰富多彩
今天，我们就来介绍一个 GitCafe 上的开源项目，自己开发一个 Markdown 编辑器
Junzkis Markdown Editor 编辑器在线演示地址： http://junzki.gitcafe.io/jmeditor/ 项目简介 这个项目是我的个人博客网站的一个子项目
2015 年的某一天，我在一次重装系统后，使用 Pelican 搭建的博客的数据全部丢失
正好自己有一个一直续费的 VPS，于是就萌生了自建网站的念头
最初我是想使用百度的 UEditor 来作为基础编辑器的
但考虑到 UEditor 功能比较多，定制起来有点麻烦，再加上不是很喜欢那种富文本编辑器，于是决定使用 Markdown 来格式化文本
在 GitHub上，我看见了一个我很喜欢的项目：jbt/markdown-editor
在读它的源代码的时候发现这个编辑器实现起来并不复杂，于是乎，决定自己造个轮子
最初的想法是模仿 Twitter 的输入框，但在实现中发现在 div 中实现输入内容分行是个挺麻烦的事情
后来我发现 Ace Editor 是个挺不错的代码编辑器，于是就把它集成了进去
接下来要做 Markdown 的实时预览
原来是想做那种左编辑右预览那种模式的，但我设计的网页中是有侧边条的，再加上显示器只有 19 寸，左右对照体验很差，就添加了一个按钮，按一下就可以切换编辑模式和预览模式
Markdown 的排版部分使用的是 Markdown-It，代码高亮使用了 highlight.js
整个编辑器做完之后简直自我感觉良好，把他分离出来成独立的项目，正好可以用 GitCafe Pages 展示一下，也算是写的第一个能拿的出手的前端项目了
功能说明 1. Markdown 预览 编辑模式下，单击上方工具条中的 HTML 按钮即可切换到预览模式
上图为编辑模式 预览模式下，单击上方工具条中的 EDIT 按钮即可切换到编辑视图
上图为预览模式 2. 代码高亮 别忘了用 Markdown 写代码的时候要用两个 “` 把代码段包裹起来哦，截图如下： 预览一下看看： 3. GitHub CSS 预览模式下，除代码高亮部分外，使用 GitHub CSS
项目主页： sindresorhus/github-markdown-css 4. 清空编辑内容 单击上方工具条中的 NEW 按钮即可清空编辑器
关于作者 Andrew Junzki GitCafe ID：Junzki 个人主页：https://gitcafe.com/Junzki 项目地址：https://gitcafe.com/Junzki/JMEditor 大四学生，通 (wei) 信 (xiu) 工 (shou) 程 (ji) 专业
目前主要使用 Python 做 Web 开发
通过「开源项目」这个栏目，我们会分享更多有趣有意义的托管在 GitCafe 上的开源项目，我们希望热爱编程、热爱开源、热爱生活的你们可以加入我们，一起挖掘并创造更多的好的项目，也欢迎向我们投稿推荐自己的或者看到的开源项目
请点击「阅读原文」查看项目更多信息