部落格園設定Google-code-prettify渲染程式碼高亮
阿新 • • 發佈:2018-12-31
一段廢話:
其實早就知道可以用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~~