公眾號的Markdown排版利器:Md2All


微信公眾號:顏家大少
如有問題或建議,請公眾號留言

本文所用排版工具:Md2All,http://md.aclickall.com

公眾號排版工具

公眾號的排版編輯工具還真的不少,但功能大同小異,大部分是針對富文本的排版,更多的是偏重素材,及各種花巧的樣式,給人一種眼花繚亂的感覺,以內容為主似乎演變成了以花巧為王。

Markdown與公眾號

Markdown以簡單的語法深受寫作朋友的喜愛,讓寫作回歸到內容本身,而不是花巧的樣式。但公眾號並不支持Markdown,所以Markdown here在蠻長的一段時間成了markdown寫作朋友們的必備插件。但Markdown here並不是專門針對公眾號的工具,出現了各種水土不服,常見的有:

  • 換行失效了,各行擠在了一起;
  • 代碼塊在iPone、iPad等平台不能正常顯示;
  • 樣式丟失了;
    等等。。。

雖然,后來又有了不少高人針對Markdown here在轉公眾號時出現的種種問題提供了各種方法,但並沒有完美的解決方案。

對IT人士來說,最困擾的是代碼塊的顯示問題,當時比較流行的解決方法是把代碼塊截屏保存為圖片,把圖片上傳到公眾號,然后再把圖片鏈接加到Markdown中。

但這種做法不但操作起來很復雜,對讀者也是不友好的,圖片顯示的代碼塊失真了,不能直接復制代碼等。。。

大家對公眾號的Markdown排版苦不堪言。

Md2All的由來

有這樣一位程序猿,也同樣被公眾號的Markdown排版折磨得苦不堪言,花了差不多一個星期的時間,研究各種現有的工具,但並沒有找到較為滿意的解決方案。

因為這位程序猿比較喜歡較真,於是就萌生了自己寫一個公眾號Markdown排版工具的想法,這就有了現在的Md2All。雖然開發的過程也因遇到的各種奇芭的坑而艱苦異常,但結果還是令人滿意的,起碼上面提到的問題都解決了。

Md2All的功能預覽

先來張Md2All的截圖
image.png

會看到,版面簡潔,所有的功能一目了然。

  • 支持“一鍵排版”的樣式模板選擇,和自定義css;
  • 支持邊編輯,邊預覽;
  • 支持左右滾動聯動;
  • 對IT人士特別友好,支持80多種代碼主題;(因為作者也是IT人士嘛:p);
  • 支持通用的Markdown語法和部分擴展語法(如:表格,任務列表,katex數學公式,注腳等...),並對html,css樣式有很好的支持。
  • 預覽OK后,只需要一鍵"復制"就能輕松粘貼到公眾號。

Md2All的一鍵排版

“一鍵排版”中提供了幾種常用的排版樣式模版,也提供了足夠多的注釋,讓初學者也能很容易根據注釋中的提示個性化自己的樣式
image.png
如上圖左邊所示,大家會看到,我只選了"字距增大”的樣式,右邊的預覽效果就完全不一樣了,
也會看到用“綠色”文字作了注釋,而用“紅色”來表示這個是修改過的位置。
左邊就是標准的css樣式,如果現有的樣式模板不適合你,那就大膽嘗試去改吧,就算改錯了也就”恢復預設值“就OK了,所以不用擔心呵。記得“保存”了才生效呵。

Md2All的代碼主題

因為作者本身是程序猿,所以在代碼的高亮顯示部分花足了功夫,80多種代碼高亮主題,可以看到下圖右上角可以選擇“代碼主題”,下面的是favorite主題的:

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();
}
}

code.png
再來張xt256代碼主題的

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();
}
}


code2.png
如果80多種都不合你心意,那也沒問題,可以參考:“一鍵排版”下的“代碼塊樣式”自定義自己的代碼高亮樣式呵。

把內容復制到公眾號

預覽OK后,只要點下圖的“復制”就能把內容一鍵復制到公眾號:
md2all_preview_2.png
到公眾號的效果如下:
weixin.png
可以看到復制到公眾號的最終效果和Md2All的預覽效果是一致的。
是不是很簡單呀。

最后

Md2All正在不斷完善中,更多的功能正在開發中,希望大家多多關注,Md2All的所有功能都是免費的,希望大家多多支持,如有問題或建議,請公眾號留言
這里寫圖片描述


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM