讓你掘金博客中的代碼顯示得更酷

微信公衆號:顏家大少css

本文所用排版工具:md.aclickall.comhtml

有沒有以爲博客中的代碼塊顯示不夠酷,或排版沒個性?
能不能酷一點,或有個性一點?
那固然是能夠的! ^-^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();
}
}
複製代碼

再來個低調的

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();
}
}
複製代碼


幾十種風格,任你選擇微信

固然,各類語言也不在話下

css的:markdown

p {
margin: 1.5em 0px;
}
h1,h2,h3,h4,h5,h6 {
margin: 1.5em 0px;
font-weight:bold;
}
複製代碼

html的:app

<div >
<span>abc<input id="code" type="checkbox" name="code" ></input></span>
<textarea id="editor" rows="100" cols="100"></textarea>
</div>
複製代碼

支持任意的語言,並能自動識別,有須要時也可直接指定ide

還有更牛的地方是,若是你對上面的風格都不滿意時,你甚至能夠自定義本身的代碼高亮的樣式,請參考:"一鍵排版"中的"代碼塊樣式「工具

看了後,你是否是很好奇,這是怎樣實現的?

其實簡單的很ui

  1. 打開免費的markdown轉換工具:md.aclickall.com,並把你的markdown內容拷貝過去
  2. 選擇你喜歡的代碼風格
  3. 選擇"一鍵排版"中的"任意樣式"對你的內容進行排版
    你甚至能夠任意修改此樣式並保存。
    注意:你可能會發現行間距很窄,但這個是沒問題的,複製到掘金後,掘金會自動調整
    參考圖以下:
    這裏寫圖片描述
  4. 預覽OK後,選擇複製
  5. 把前面複製的內容粘貼到掘金默認的markdown編輯模式左邊的編輯框,就搞掂

更多內容,歡迎關注微信公衆號「顏家大少」
這裏寫圖片描述spa

相關文章
相關標籤/搜索