Google code-prettify github
是 google 提供做為在文章中崁入程式碼並且自動高亮的功能
本文章參考 灰色スズメの足跡
該功能範例如下
main(){
extrn a,b,c;
putchar(a); putchar(b); putchar(c); putchar('!*n');
}a ‘hell’;
b ‘o, w’;
c ‘orld’;
他是利用 blogger 小工具
將 script 導入
置換頁面內容
並且也能利用 CSS 改變格式
而我參考的灰色スズメの足跡
我個人認為它做出來的效果很好
非常適合閱讀
實際做法如下
到 blogger 後台
版面設定 – 新增小工具 – HTML/JavaScript新增
新增內容如下
<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=vb&lang=css&skin=desert' type='text/javascript' /></script>
<style>
/*
Google code-prettify
*/
pre.prettyprint
{
border: 1px solid #cccccc !important;
line-height: 1.5em;
overflow: auto;
padding: 2em !important;
}
pre.prettyprint > ol.linenums
{
padding-left: 2em;
}
pre.prettyprint > ol.linenums > li
{
border-left: 1px solid #cccccc;
margin-bottom: 0;
}
pre.prettyprint > ol.linenums > li.L0,
pre.prettyprint > ol.linenums > li.L1,
pre.prettyprint > ol.linenums > li.L2,
pre.prettyprint > ol.linenums > li.L3,
pre.prettyprint > ol.linenums > li.L4,
pre.prettyprint > ol.linenums > li.L5,
pre.prettyprint > ol.linenums > li.L6,
pre.prettyprint > ol.linenums > li.L7,
pre.prettyprint > ol.linenums > li.L8,
pre.prettyprint > ol.linenums > li.L9
{
list-style-type: decimal;
}
pre.prettyprint > ol.linenums > li.L1,
pre.prettyprint > ol.linenums > li.L3,
pre.prettyprint > ol.linenums > li.L5,
pre.prettyprint > ol.linenums > li.L7,
pre.prettyprint > ol.linenums > li.L9
{
background-color: transparent;
}
pre.prettyprint > ol.linenums > li span:first-child
{
padding-left: 1em;
}
pre.prettyprint > ol.linenums > li span:last-child
{
padding-right: 1em;
}
/* plain text */
pre.prettyprint .pln { color: #cccccc; }
/* string content */
pre.prettyprint .str { color: #cccc33; }
/* a keyword */
pre.prettyprint .kwd { color: #00cc00; }
/* a comment */
pre.prettyprint .com { color: #cc3366; }
/* a type name */
pre.prettyprint .typ { color: #00cc00; }
/* a literal value */
pre.prettyprint .lit { color: #3399cc; }
/* punctuation, lisp open bracket, lisp close bracket */
pre.prettyprint .pun,
pre.prettyprint .opn,
pre.prettyprint .clo
{ color: #cccccc; }
/* a markup tag name */
pre.prettyprint .tag { color: #3399cc; }
/* a markup attribute name */
pre.prettyprint .atn { color: #00cc00; }
/* a markup attribute value */
pre.prettyprint .atv { color: #cccc33; }
/* a declaration; a variable name */
pre.prettyprint .dec,
pre.prettyprint .var
{ color: #00cc00; }
/* a function name */
pre.prettyprint .fun { color: #cc66cc; }
</style>
另外我會設定不顯示
一樣會有效果但不會出現空白的小工具
最後就是使用了 只要在撰寫文章時 切換到 HTML 標籤 輸入
<pre class="prettyprint lang-js linenums">這邊輸入你的程式碼 就能帶出效果</pre>
他可以客製化的程度很大很多
建議可以參考 github 官方的介紹，並看看其他人如何使用
就能做出與眾不同的效果了