MarkdownPad 2有插入代碼塊的功能，但樣式卻不盡人意，但又不想換個編輯器，找了挺多相關資料，最後在MarkdownPad 2集成prettify高亮插件。

如下相關資料：

[HTML] Prettify 代碼高亮使用總結

Google Code Prettify，代碼高亮的JS庫

詳解Google Code Prettify代碼高亮Prettify.js庫使用及其應用

prettify的bootcdn

prettify的github

你可以下載後引用，也可以直接引用bootcdn。

具體步驟：

1.打開MarkdownPad2

2.打開鏈接http://www.bootcdn.cn/prettify/ 分別復制這兩個文件標簽

3.在MarkdownPad2中的菜單中，點擊【工具】——【選項】或者直接F7可以看到如下圖

4.點擊【高級】——【HTML Head編輯器】

5.分別將復制的引用的標簽粘貼上去，並且加上片段代碼，保存並關閉

6.現在加入代碼塊的要求

<pre class="prettyprint lang-javascript">  
function getNowDate() {
    var date = new Date();
    var split = "-";
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month 
 
<= 9) {
        month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
    }
    var currentdate = year + split + month + split + strDate;
    return currentdate;
}
</pre> 

插入的代碼必須放到

<pre class="prettyprit lang-指定樣式">

</pre>

現在看下效果：

我們都知道MarkdownPad2是實時預覽，跟瀏覽器是有區別的，我們按F6瀏覽器查看

或許這不是實時預覽的效果，但我們沒必要非得編輯的時候看到高亮效果，比如說我們每次去閱讀自己的寫md筆記，每次都得打開

MarkdownPad2來查看，我們把代碼高亮配置好了，直接插入代碼就行了，寫完以後我們可以導出html,導出pdf是沒有效果的，這裏說下

因為我引用的是線上的鏈接，所以導出來的html要有網絡才能看到高亮效果，如果沒網絡，可以下載下來，添加css和javascript

下面改下高亮主題：

打開github https://github.com/google/code-prettify/tree/master/styles

裏面有多個主題，相關資料也有提到，這裏我就直接用sunburst.css的主題樣式

步驟如下：

1.按F7，點擊【樣式表】，添加sunburst.css，把樣式粘貼，點擊保存並關閉

/* Pretty printing styles. Used with prettify.js. */
/* Vim sunburst theme by David Leibovic */

pre .str, code .str { color: #65B042; } /* string  - green */
pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */
pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */
pre .typ, code .typ { color: #89bdff; } /* type - light blue */
pre .lit, code .lit { color: #3387CC; } /* literal - blue */
pre .pun, code .pun { color: #fff; } /* punctuation - white */
pre .pln, code .pln { color: #fff; } /* plaintext - white */
pre .tag, code .tag { color: #89bdff; } /* html/xml tag    - light blue */
pre .atn, code .atn { color: #bdb76b; } /* html/xml attribute name  - khaki */
pre .atv, code .atv { color: #65B042; } /* html/xml attribute value - green */
pre .dec, code .dec { color: #3387CC; } /* decimal - blue rgb(47, 54, 64) */

pre.prettyprint, code.prettyprint {
    background-color: #000;
    border-radius: 8px;
}

pre.prettyprint {
    width: 95%;
    margin: 1em auto;
    padding: 1em;
    white-space: pre-wrap;
}


/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE; } /* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { }

@media print {
  pre .str, code .str { color: #060; }
  pre .kwd, code .kwd { color: #006; font-weight: bold; }
  pre .com, code .com { color: #600; font-style: italic; }
  pre .typ, code .typ { color: #404; font-weight: bold; }
  pre .lit, code .lit { color: #044; }
  pre .pun, code .pun { color: #440; }
  pre .pln, code .pln { color: #000; }
  pre .tag, code .tag { color: #006; font-weight: bold; }
  pre .atn, code .atn { color: #404; }
  pre .atv, code .atv { color: #060; }
}

實時效果如下：

瀏覽器效果：

我們不能總是實時看到的代碼塊烏漆嘛黑，總得能看到代碼嘛，所以改下樣式
前面我們插入的主題樣式代碼

pre.prettyprint, code.prettyprint {
    background-color: #000;
    border-radius: 8px;
}
把背景色#000改為：rgb(47, 54, 64)，再看效果。

此次代碼高亮只能改善下導出html能高亮（瀏覽器查看），至於其他能實時看到高亮效果的辦法目前沒有找到，其他
md編輯器或許有實時高亮這裏就不再累贅，喜歡用MarkdownPad2的朋友還是不錯的，當然也可以自定義自己喜歡的高亮樣式。

MarkdownPad2使用代碼高亮插件