FGD · babel 官网在浏览器里写代码，是如何实现的？

FGD(FE GitHub Daily)，前端 GitHub Daily， 由公众号素燕组织，每天分享一个前端实用的库，旨在拓宽技术视野，为业务快速找到低成本的解决方案。

推荐理由

你一定看到过之间在浏览器里写代码。

我也看到过，最好的效果是 babel 官网，体验非常好。我当时感觉到前端太「灵活了」，所见即所得。我给大家截了个图，代码高亮，自动可以把左侧的代码通过 babel 转换。

babel 官网是如何实现的呢？

我第一时间在浏览器通过 inspect 查看，并没有发现人家用的是啥技术。最后发现这个网站，在 GitHub 上是开源的，在 package.json 中发现使用的是 codeMirror。

CodeMirror 是一个使用 JavaScript 实现的代码编辑器，可直接应用到浏览器，支持 100 多种语言，灵活定义主题，支持代码高亮。如果你想在你的网站中实现写代码的功能，选 codeMirror 总没错。

GitHub 指数

CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with over 100 language modes and various addons that implement more advanced editing functionality. Every language comes with fully-featured code and syntax highlighting to help with reading and editing complex code.

Star 数 21k，比 node 的 star 数都高。

https://github.com/codemirror/CodeMirror

---

推荐阅读：

原来实现 CLI 工具如此简单，以前路走错了