写个小编辑器娱乐自己

上周有两天感冒低烧了，躺在床上昏昏沉沉听罗胖的发布会，说到《黑天鹅》书中的一句话：现代社会给我们的双重惩罚是，既让我们衰老的更快，又让我们活得更长。深有同感，然后我就下单买了每天听本书的 VIP 会员。

作为一个程序员，写文章写文档已经习惯了用 Markdown，用别的各种不舒服，平常写公众号文章我一般用 Day One 写，写完保存，直接复制到微信公众号的编辑器里面，基本上也就成了。唯一有个缺点就是对代码的支持不友好，没高亮。

网上其实有挺多解决方案的，比如 Markdown Here，可以把你网页中的 md 文本给转化成漂亮的格式，这个在写邮件的时候格外好用。用在公众号问题也不大，但是要改改样式，生命在于折腾，还是自己另外搞一个好。

之前看小胡子大大和 Phodal 大大也写过在线的 md 编辑器，支持微信里面贴代码。不过，样式和我平常用的有些不一样，刚好最近要在业务里面尝试新框架 TypeScript + Vue，就找了这个机会写个 md 编辑器了解下新框架的流程，顺便娱乐下自己，慰籍一下我想写代码的心灵。

界面比较简单，布局是和 Phodal 大大基本一样的。主要使用的是 TypeScript + Vue，用到几个开源库：

1. ShowDown，一个 Markdown 解析库，把 Markdown 文本变成 HTML；
2. Google Code Prettify，这个是用来做代码高亮的；
3. Clipboard，把生成的 HTML 复制到剪贴板。

核心代码很简单，只有 10 行。

    // lifecycle hook
    mounted () {
        new Clipboard("#copy-btn");
        this.loadInitMD()
    }
    updated(){
        prettify.prettyPrint();
    }

    // computed 
    get textHtml () {
        return this.converter.makeHtml(this.editorText)
    }

大致就是 textarea 的值和 this.editorText 绑定，生成的 HTML 用计算属性 textHtml 和 this.editorText 联系起来，在 update 的钩子函数里面执行代码高亮的操作。核心逻辑就是这样，当然，还有蛮多细节在代码里。

涉及的技术点有：

1. TypeScript
2. Vue
3. SASS
4. CSS Module
5. Async/Await

至于用 TypeScript + Vue 有啥好处可以参考 wonder 的文章（就是他说要在项目里用这套的）：https://www.qcloud.com/community/article/935663

总的来说，TypeScript 的强类型对规范接口有好处；TypeScript 不仅满足 Babel 的编译功能，而且更加优雅；结合 Webpack，使用 Tree Shaking 特性，再也不怕乱引用库把打包文件弄大了。

除此之外，还尝试了一把 CSS Module，发现这是个很有意思的东西，有了这个，可以一定程度上告别全局 CSS了。用上了这个，JavaScript 里面可以知道有哪些能用的类名，直接用就可以了，比如下面的 Styles.editor。

<textarea v-bind:class="Sytles.editor" id="editor" v-model="editorText" cols="100" rows="10" ></textarea>

关于 CSS Module 说起来比较长，下次介绍吧。

最后界面是这样的：

公众号：程序员的诗和远方

复制东西到左边，然后点右边的复制按钮，就可以愉快的粘贴到公众号编辑器里面了。

在线地址： http://md.imbeta.cn

GitHub 地址：https://github.com/bob-chen/md