微信公眾號的代碼塊插入，及一鍵排版

microcosm1994 發布于2019-08-01 18:05 / 1625人閱讀

摘要：微信公眾號顏家大少注因對一些自定義的樣式不支持，可參考此文在其它平臺的不一樣的顯示樣式掘金的微信公眾號的微信公眾號的排版問題前段時間，準備在微信公眾號上寫文章時，卻發現公眾號居然連個最基本的插入代碼塊的功能都沒有。

微信公眾號：顏家大少

注：因segmentfault對一些自定義的css樣式不支持，可參考此文在其它平臺的不一樣的顯示樣式
掘金的：https://juejin.im/post/5a1f5d...
微信公眾號的：http://mp.weixin.qq.com/s/PzL...

. 微信公眾號的排版問題

前段時間，準備在微信公眾號上寫文章時，卻發現公眾號居然連個最基本的插入代碼塊的功能都沒有。

很納悶，難道微信的開發者不用寫代碼的？

吐槽歸吐槽，問題還得想辦法解決。然后就是各種百度，推薦最多的我想就是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"下的代碼的顯示。
注：因segmentfault不支持自定義css樣式，所以發張截圖效果：

支持任意的語言，并能自動識別，有需要時也可直接指定

還有更牛的地方是，如果你對上面的風格都不滿意時，你甚至可以自定義自己的代碼高亮的樣式，請參考："一鍵排版"中的"代碼塊樣式“

. 另外

如果有朋友只用到此工具的代碼塊部分，也可以先用此工具把自己的代碼塊渲染好，然后一段段“復制”插入到自己的公眾號文章中。

. 最后

此工具目前還在開發階段，很多功能正在完善中，對瀏覽器的兼容性未做全面的測試，所以建議先用Chrome瀏覽器作編輯。

如對此工具有任何建議，歡迎在公眾號：“顏家大少”上留言：

GPU云服務器云服務器關于微信公眾號的問題微信公眾號排版小程序和公眾號的區別公眾號的后臺服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51571.html

微信公眾號的代碼塊插入，及一鍵排版

摘要：微信公眾號顏家大少注因對一些自定義的樣式不支持，可參考此文在其它平臺的不一樣的顯示樣式掘金的微信公眾號的微信公眾號的排版問題前段時間，準備在微信公眾號上寫文章時，卻發現公眾號居然連個最基本的插入代碼塊的功能都沒有。微信公眾號：顏家大少注：因segmentfault對一些自定義的css樣式不支持，可參考此文在其它平臺的不一樣的顯示樣式掘金的：https://juejin.im/pos...

1treeS 2019-08-29 13:56 評論0 收藏0
微信公眾號的代碼塊插入，及一鍵排版

摘要：微信公眾號顏家大少注因對一些自定義的樣式不支持，可參考此文在其它平臺的不一樣的顯示樣式掘金的微信公眾號的微信公眾號的排版問題前段時間，準備在微信公眾號上寫文章時，卻發現公眾號居然連個最基本的插入代碼塊的功能都沒有。微信公眾號：顏家大少注：因segmentfault對一些自定義的css樣式不支持，可參考此文在其它平臺的不一樣的顯示樣式掘金的：https://juejin.im/pos...

LittleLiByte 2019-08-21 17:50 評論0 收藏0
常用的Python工具與資源

摘要：經常收到粉絲的疑問，公眾號的代碼排版真的很好看，究竟用的什么開發工具呢在這里，統一回復一下大家，公眾號的排版用的是，而我平時使用的開發工具是。很多粉絲說現在的書籍很貴，有沒有什么比較好的教程比較好的資源，那么，廖老師的這個課程依舊是首選。經常收到粉絲的疑問，公眾號的代碼排版真的很好看，究竟用的什么開發工具呢？在這里，統一回復一下大家，公眾號的排版用的是MarkDown Here，而我...

MockingBird 2019-07-30 16:52 評論0 收藏0
持續更新，微信公眾號文章批量采集系統的構建

摘要：我從年就開始做微信公眾號內容的批量采集，最開始的目的是為了做一個的垃圾內容網站。經過實測的微信客戶端在批量采集過程中崩潰率高于安卓系統。在年年初的時候微信公眾號和微信文章開始使用鏈接。我從2014年就開始做微信公眾號內容的批量采集，最開始的目的是為了做一個html5的垃圾內容網站。當時垃圾站采集到的微信公眾號的內容很容易在公眾號里面傳播。當時批量采集特別好做，采集入口是公眾號的歷史消...

marek 2019-06-27 15:04 評論0 收藏0