微信公衆號:顏家大少javascript
本文所用排版工具:md.aclickall.comcss
前段時間,準備在微信公衆號上寫文章時,卻發現公衆號竟然連個最基本的插入代碼塊的功能都沒有。html
很納悶,難道微信的開發者不用寫代碼的?前端
吐槽歸吐槽,問題還得想辦法解決。而後就是各類百度,推薦最多的我想就是markdown here了。java
markdown here的確是個好東西,但問題是它只是一個通用的markdown轉換插件,並非針對公衆號的,代碼經markdown here轉換後,粘貼到公衆號,最多見的問題是:xcode
代碼換行錯了,不是同一行的代碼卻擠在了同一行,可讀性不好;瀏覽器
代碼橫向不會滾屏了 ,也是直接擠到了下一行,iPhone,iPad的尤其嚴重;微信
有些樣式丟失了;markdown
雖然能夠自定義 css,但沒參考樣式,對普通的非前端開發者來講,不太好弄。app
也嘗試了一些朋友專爲公衆號作轉換的markdown工具,效果並不太滿意,不過真要感謝他們的,畢竟他們的工具仍是提供了一些思路,因而就有了本身作一個工具的想法。
固然,想法是美好的,道路是曲折的。對於開發的過程,對於所遇到的坑,此處先省略100萬字......
好吧,接下來就是介紹個人markdown工具了
一個在線的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瀏覽器做編輯。
如對此工具備任何建議,歡迎在公衆號:「顏家大少」上留言: