Blogger Code Pretty

之前在貼一些Code時，想區分一下跟內文的差異，但Blogger並沒有比較好的格式，雖然VSCode貼上來，會自動有顏料，但總也不是這麼好看如下：

▼以下是VSCode直接貼上來的程式碼，但間距太大，還是不好看。

Route::get('/', function () {

//return view('welcome');

return 'Hello World!';

});

【CSS方法】
爬文找了一下CSS來改善，只要將下面CSS加入Blogger裡，

code.litepretty {
    display: block; /* fixes a strange ie margin bug */
    font-family: Courier New;
    overflow:auto;
    background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y;
    border: 1px solid #ccc;
    padding: 10px 10px 10px 21px;
    max-height:200px;
    line-height: 1.2em;
}
code.litepretty.cmd {
    background-image: none;
    background-color: black;
    color: white;
}
code.litepretty.note {
    background-color: white;
    color: black;
}
code.litepretty>.imp{
    color: red;
}
code.litepretty>.info{
    color: lightblue;
}
code.litepretty>.cmt{
    color: gray;
}

加在哪裡呢？到Blooger→主題→自訂→進階→新增CSS，將上述的CSS貼上即可。

用法就是編輯HTML加上 <code class="litepretty">內容</code>

雖然可以讓Code稍為區隔，但是自已加上br也是有點蠢！

【highlight.js方法】
決定再試一個方法，使用highlight.js，選擇想要的styles，例如：Ir Black
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/ir-black.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
將hightlight的CSS與javascript加到Blogger→版面配置→新增小工具貼上上述語法，如下圖

用這個方法直接在編輯HTML時只要用下列方式：
<pre><code class="php hljs">
//程式碼
</code></pre>
就可以顯示出以下格式了，記得class要改成所要顯示的語言即可。

//程式碼
Route::get('/', function () {
    //return view('welcome');
    return 'Hello World!';
});

Route::get('about', function () {
    return 'this is about!';
});

參考文章：
(1) 美化 blogger 程式碼
(2) 網頁使用程式碼高亮的最佳作法及推薦外掛
(3) 『教學』如何美化部落格上的Code排版？推薦使用highlight.js高光程式碼！WordPress、Blog、Web都可用～