讓你掘金部落格中的程式碼顯示得更酷

微信公眾號：顏家大少

本文所用排版工具：md.aclickall.com

有沒有覺得部落格中的程式碼塊顯示不夠酷，或排版沒個性?
能不能酷一點，或有個性一點？
那當然是可以的！ ^-^

直接看程式碼效果，先來個高調的

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的：

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>  
複製程式碼

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

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

看了後，你是不是很好奇，這是怎樣實現的？

其實簡單的很

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

更多內容，歡迎關注微信公眾號“顏家大少”