本文目的：在博客園中引入sublime樣式的代碼高亮效果。
話不多說，先上效果圖：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>helloWorld</title>
<style>
div{
text-align: center;
font-size: 20px;
}
</style>
</head>
<body>
<div id="hello">hello</div>
</body>
<script>
var oDiv=document.getElementById('hello');
oDiv.onclick=function(){
alert('hello world!');
}
</script>
</html>
從上圖可以看出，雖然和sublime中看到的有細微差別，不過大體還是比較像了。
接下來說說做法，實現方式其實很簡單，但中間還是有一些坑：
1.引入hightlight.js的sublime皮膚
highlight.js官網
highlight.js是用在html中實現代碼高亮的一個插件，這里我們只是為了獲得sublime的CSS樣式，因此
不用看官方文檔的usage！
不用看官方文檔的usage!
不用看官方文檔的usage!
進入官網后點擊get version:
可以在這個頁面選擇編程語言
這里都不重要，直接點擊下方的download按鈕，在下載得到的文件里面找到monokai-sublime.css
把里面的內容復制一下，放入博客園后台管理-設置-頁面定制CSS代碼當中
注意一定要在CSS文件的.hljs前面加上.cnblogs-markdown，不然樣式會失效
至此，完成了第一小步
2.使用markdown編輯器
第1步使用的CSS樣式，只有在markdown編輯器的模式下才會生效，因此想要通過這種方法實現代碼高亮，只有使用markdown編輯器來編輯博客內容。
操作方法: 管理--選項--將默認編輯器選為markdown
然后在編輯代碼塊的時候，前后加上 ``` 就大功告成了
由於我們引入的樣式和博客園的默認樣式會有所沖突，因此需要調整我們放到頁面定制CSS代碼中的CSS，比如加一些 !important，改一些具體顏色等等。這個可以自己按F12，點到對應元素看看，是哪些元素的樣式有沖突。
我個人使用的CSS樣式如下：
/*
Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
*/
.cnblogs-markdown .hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #23241f !important;
color:white;
font-size:16px !important;
}
.hljs,
.hljs-tag,
.hljs-subst {
color: #f8f8f2;
}
.hljs-strong,
.hljs-emphasis {
color: #a8a8a2;
}
.hljs-bullet,
.hljs-quote,
.hljs-number,
.hljs-regexp,
.hljs-literal,
.hljs-link {
color: #ae81ff;
}
.hljs-code,
.hljs-title,
.hljs-section,
.hljs-selector-class {
color: #a6e22e;
}
.hljs-strong {
font-weight: bold;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-name,
.hljs-attr {
color: #f92672;
}
.hljs-keyword,.hljs-built_in{
color:#66d9ef;
}
.hljs-symbol,
.hljs-attribute {
color: #66d9ef;
}
.hljs-params,
.hljs-class .hljs-title {
color: #f8f8f2;
}
.hljs-string,
.hljs-type,
.hljs-builtin-name,
.hljs-selector-id,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-variable {
color: #e6db74;
}
.hljs-comment,
.hljs-deletion{
color: #75715e;
}
.hljs-meta{
color: #f92672;
}
至此，徹底大功告成。