博客园设置Google-code-prettify渲染代码高亮

一段废话：

其实早就知道能够用google-code-prettify来设置高亮，可是比较懒，如今才折腾了一下。看见好看的代码高亮，心情都变好啦~
感受博客园的代码高亮，尤为是Markdown编辑模式下的，可定制性好差。但是在博客园发博客比在本身的独立博客发要比较方便（个人独立博客用的是hexo静态博客），并且也习惯了在这里发布。

首先说一下用pretty的缺点

• 以前的TinyMCE编辑器下发布代码，若是是插入代码的两个按钮里的右边的那个，pretty渲染后会变成错乱的，<span>标签都会显示出来。
  解决方法就是手动去改之前的文章（这个过程可让你逃避一下复杂的现实世界，还能够回顾一下之前写过的东西，好吧。。其实就是要花很长时间去干重复的工做）。
• 若是要设置行号，Markdown编辑模式的代码会渲染成一行一块，很奇怪，由于每一行都有<code>标签，因此只好选择不要行号。

接下来是设置的步骤

• 首先要确保你已经开启js功能。

  jQuery博客园已经自动加载了。就不用咱们加了。
  prettify.js是在这里下载的：https://code.google.com/p/google-code-prettify/
  我把它传到了博客的文件里。
  博客设置页面的页脚Html代码：

<script src="http://files.cnblogs.com/files/flipped/prettify.js"></script>
<script type="text/javascript">
(function() {
     $("pre").addClass("prettyprint");
     prettyPrint();
})();
</script>

• 配色和字体
  默认的配色不喜欢，能够设置css，推荐参考https://jmblog.github.io/color-themes-for-google-code-prettify/
  例如个人就是：

/*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */
.pln{color:#4d4d4c}ol.linenums{margin-top:0;margin-bottom:0;color:#8e908c}li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{padding-left:1em;background-color:#fff;list-style-type:decimal!important;}@media screen{.str{color:#718c00}.kwd{color:#8959a8}.com{color:#8e908c}.typ{color:#4271ae}.lit{color:#f5871f}.pun{color:#4d4d4c}.opn{color:#4d4d4c}.clo{color:#4d4d4c}.tag{color:#c82829}.atn{color:#f5871f}.atv{color:#3e999f}.dec{color:#f5871f}.var{color:#c82829}.fun{color:#4271ae}}

/*下面是我设置背景色，字体大小和字体*/
.cnblogs-markdown code{
background:#fff!important;
}
.cnblogs_code,.cnblogs_code span,.cnblogs-markdown .hljs{
    font-size:16px!important;
}

.syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, .syntaxhighlighter textarea {
    font-size: 16px!important;
}

.cnblogs_code, .cnblogs_code span, .cnblogs-markdown .hljs{
font-family:consolas, "Source Code Pro", monaco, monospace !important;
}

• 而后就大功告成啦~~O(∩_∩)O~~