先貼上成果：大家可以先行體驗(yàn)：
http://zhouzhili.github.io/wechatformat/index.html#/
最近閑來(lái)無(wú)事，又開(kāi)始著手打理自己的公眾號(hào)，想著還是需要有個(gè)地方記錄一下自己的學(xué)習(xí)情況以及跟大家分享，長(zhǎng)久以來(lái)，我都是習(xí)慣于使用 markdown 來(lái)寫(xiě)文章，但是當(dāng)我打開(kāi)微信公眾號(hào)新建一篇圖文素材，what?這簡(jiǎn)陋的富文本編輯器，窗口還這么小，一邊寫(xiě)文章還要一邊進(jìn)行排版，都 9012 年了，微信的交互還是這樣？
實(shí)在難以吐槽。打開(kāi)瀏覽器一搜，什么 135 編輯器啥的，這花花綠綠的是啥，我總算知道了有些公眾號(hào)里那些非主流的排版是從哪里來(lái)的了。
作為程序員，我經(jīng)常使用 markdown 來(lái)編寫(xiě)博客，markdown 語(yǔ)法簡(jiǎn)潔容易掌握，同時(shí)又可以專(zhuān)注于寫(xiě)作本身，不用寫(xiě)兩句然后又轉(zhuǎn)去排版，思路比較連貫，那么，不可以直接把 markdown 預(yù)覽后的格式直接粘貼到微信里面嗎？
答案是可以的，網(wǎng)上有很多這樣的嘗試，做的比較好的有兩個(gè):Lyric 的wechat-format和胡子哥的WxMarkdown兩個(gè)都寫(xiě)的比較好了，能實(shí)現(xiàn)大部分的需求，但是他們都沒(méi)有提供自定義樣式，我只能選擇和他們提供的樣式一樣。這就很束縛了，我喜歡放飛自我的感覺(jué)，那么，只能自己動(dòng)手來(lái)實(shí)現(xiàn)了。
我基于 Lyric 的代碼進(jìn)行修改，思路如下：
解析 markdown，我使用marked進(jìn)行解析，marked 會(huì)將 markdown 解析為 HTML 元素，并且在期 render 中可以對(duì)各個(gè)元素進(jìn)行處理，比如應(yīng)用自己設(shè)定的樣式之類(lèi)，十分方便。
代碼高亮，作為程序員，代碼高亮是必不可少的。我使用highlight.js處理 marked 解析之后的 code 標(biāo)簽進(jìn)行代碼高亮，highlight 有上百種代碼樣式，但是并不是所有的都很美觀，因此我刪除了其中的一些樣式。在切換高亮風(fēng)格的時(shí)候只需要切換 css 文件即可。我們只需要在初始化的時(shí)候創(chuàng)建一個(gè) link 標(biāo)簽，在切換樣式的時(shí)候動(dòng)態(tài)修改 link 標(biāo)簽的 href 屬性就可以了。
樣式自定義。自定義樣式只需要在默認(rèn)的樣式文件上修改保存即可。本來(lái)自定義樣式以 css 文件方式存儲(chǔ)最為簡(jiǎn)單，但是在修改 css 的時(shí)候獲取此刻編輯的標(biāo)簽十分困難，不夠直觀。因此，我選擇以 JSON 存儲(chǔ)樣式，使用jsoneditor作為樣式編輯器，我們就可以在編輯某個(gè)樣式的時(shí)候高亮當(dāng)前編輯的元素，使得編輯更加直觀。
由于沒(méi)有后臺(tái)支撐，自定義樣式目前只支持創(chuàng)建一個(gè)(太懶，不想寫(xiě)了),而且保存在瀏覽器的 localStorage,因此在您清除瀏覽器緩存之后可能會(huì)消失，建議先保存到本地以防不測(cè)。
之后，電腦上的排版總是和手機(jī)會(huì)有些不一樣，主要是屏幕尺寸的問(wèn)題，于是我參考墨刀做了個(gè)手機(jī)預(yù)覽的功能，可以直觀的看到你的文章在手機(jī)上是否合適，這個(gè)還是十分實(shí)用的，類(lèi)似于這樣的效果：
大道至簡(jiǎn)，這才是我想要的編輯器，專(zhuān)注于文章本身而不是在撰寫(xiě)和排版間來(lái)回切換，有同樣煩惱的朋友可以嘗試下，在線地址是：
http://zhouzhili.github.io/wechatformat/index.html#/
想要研究 markdown 如何解析成微信支持格式的也可以前往查看，源碼已開(kāi)源：
https://github.com/zhouzhili/wechat-article-format
，大家也可以動(dòng)手做一個(gè)屬于自己的格式轉(zhuǎn)換器。
