之前在貼一些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都可用~