微信公眾號：顏家大少
本文所用排版工具：http://md.aclickall.com
. 微信公眾號的排版問題
前段時間，准備在微信公眾號上寫文章時，卻發現公眾號居然連個最基本的插入代碼塊的功能都沒有。
很納悶，難道微信的開發者不用寫代碼的？
吐槽歸吐槽，問題還得想辦法解決。然后就是各種百度，推薦最多的我想就是markdown here了。
markdown here的確是個好東西，但問題是它只是一個通用的markdown轉換插件，並不是針對公眾號的，代碼經markdown here轉換后，粘貼到公眾號，最常見的問題是：
-
代碼換行錯了，不是同一行的代碼卻擠在了同一行，可讀性很差;
-
代碼橫向不會滾屏了 ，也是直接擠到了下一行，iPhone,iPad的尤為嚴重;
-
有些樣式丟失了;
-
雖然可以自定義 css,但沒參考樣式，對普通的非前端開發者來說，不太好弄。
也嘗試了一些朋友專為公眾號做轉換的markdown工具，效果並不太滿意，不過真要感謝他們的，畢竟他們的工具還是提供了一些思路,於是就有了自己做一個工具的想法。
當然，想法是美好的，道路是曲折的。對於開發的過程，對於所遇到的坑，此處先省略100萬字......
好吧，接下來就是介紹我的markdown工具了
. Md2All
一個在線的Markdown轉換工具
網址：http://md.aclickall.com
-
支持通用的Markdown語法，並對html,css樣式有很好的支持（請看網站示例的高級使用部分）
-
對 微信公眾號 做了特別的優化：
解決把內容粘貼到公眾號時，圖片、或樣式丟失的問題;
解決代碼塊換行不正確,特別是iPone、iPad上不會滾動的問題;
支持135，96等微信編輯器的所用樣式(如"標題"等），只需先點這些微信編輯器的"html"圖標，再把內容拷貝過來即可。 -
對代碼塊的顯示專門做了優化，幾十種超酷的代碼風格任你選擇
-
支持 "一鍵排版" 的css樣式模板選擇，和自定義css。你一點就知到^_^
-
預覽ok后，只需要點“復制”按鍵粘貼到公眾號即可。
-
另外
-
支持直接把頁面"復制"到 "CSDN" 和 "博客園" 中，所有的樣式保持一致。
請參考此博文：http://blog.csdn.net/gary_yan/article/details/78645303 -
支持直接把頁面"復制"到 "掘金" 中，如下：
選擇 "一鍵排版" 中的 "掘金樣式"
點"復制"然后粘貼到 "掘金" 默認的markdown編輯模式左邊的編輯框就OK了
請參考此博文：https://juejin.im/post/5a1bcc6ef265da431f4acb09
-
后期會考慮增加對其它博客平台的支持.
. 界面預覽
先來張玉照吧：
沒有花巧的東西，所有的功能一目了然！
支持邊編輯，邊預覽;支持左右滾動聯動。
提供80多種超酷的代碼主題。
通常，公眾號多用於手機端顯示，所以一般選：代碼緊湊，這個看各人喜歡吧。
"一鍵排版"同樣支持邊改樣式，邊預覽。
如下圖，我只是選了個css主題為：“標題顏色”，然后代碼主題為：“xcode”,整篇文章的效果就不一樣了。
. 代碼塊展示
好吧，接下來還是好好展示一下我所說的超酷的代碼風格吧，
下面是默認的“favorite"下的代碼的顯示。
java的：
public class MyActivity extends AppCompatActivity {
@Override //override the function
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
try {
OkhttpManager.getInstance().setTrustrCertificates(getAssets().open("mycer.cer");
OkHttpClient mOkhttpClient= OkhttpManager.getInstance().build();
} catch (IOException e) {
e.printStackTrace();
}
}
javascript的：
function DisplayWindowSize(){
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
}
css的：
p {
margin: 1.5em 0px;
}
h1,h2,h3,h4,h5,h6 {
margin: 1.5em 0px;
font-weight:bold;
}
html的：
<div >
<span>abc<input id="code" type="checkbox" name="code" ></input></span>
<textarea id="editor" rows="100" cols="100"></textarea>
</div>
支持任意的語言，並能自動識別，有需要時也可直接指定
還有更牛的地方是，如果你對上面的風格都不滿意時，你甚至可以自定義自己的代碼高亮的樣式，請參考："一鍵排版"中的"代碼塊樣式“
. 另外
如果有朋友只用到此工具的代碼塊部分，也可以先用此工具把自己的代碼塊渲染好，然后一段段“復制”插入到自己的公眾號文章中。
. 最后
此工具目前還在開發階段，很多功能正在完善中，對瀏覽器的兼容性未做全面的測試，所以建議先用Chrome瀏覽器作編輯。
如對此工具有任何建議，歡迎在公眾號：“顏家大少”上留言：