上周有两天感冒低烧了,躺在床上昏昏沉沉听罗胖的发布会,说到《黑天鹅》书中的一句话:现代社会给我们的双重惩罚是,既让我们衰老的更快,又让我们活得更长。深有同感,然后我就下单买了每天听本书的 VIP 会员。
作为一个程序员,写文章写文档已经习惯了用 Markdown,用别的各种不舒服,平常写公众号文章我一般用 Day One 写,写完保存,直接复制到微信公众号的编辑器里面,基本上也就成了。唯一有个缺点就是对代码的支持不友好,没高亮。
网上其实有挺多解决方案的,比如 Markdown Here,可以把你网页中的 md 文本给转化成漂亮的格式,这个在写邮件的时候格外好用。用在公众号问题也不大,但是要改改样式,生命在于折腾,还是自己另外搞一个好。
之前看小胡子大大和 Phodal 大大也写过在线的 md 编辑器,支持微信里面贴代码。不过,样式和我平常用的有些不一样,刚好最近要在业务里面尝试新框架 TypeScript + Vue,就找了这个机会写个 md 编辑器了解下新框架的流程,顺便娱乐下自己,慰籍一下我想写代码的心灵。
界面比较简单,布局是和 Phodal 大大基本一样的。主要使用的是 TypeScript + Vue,用到几个开源库:
核心代码很简单,只有 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
的钩子函数里面执行代码高亮的操作。核心逻辑就是这样,当然,还有蛮多细节在代码里。
涉及的技术点有:
至于用 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