如何在網頁上漂亮的嵌入程式碼？使用 CSS 製作 Code 小框框

如果想要把一段程式碼 (Code) 漂亮的呈現在網頁上，比較簡單的想法可能就是使用 HTML TAG <blockquote> 來縮排，但實際上還是會讓程式碼和內文混在一起，沒有真的很好的區隔，那要怎麼做出好讀的程式碼框框呢？其實只要在網頁中加上幾行 CSS ，往後要嵌入程式碼只要用 HTML TAG 就可以達到很美觀的效果了。

CODE 呈現範例

只要將下列的 CSS 增加到網站中，將來只要將程式碼放在 <code> 與 </code> 之間就可以用如範例的方式呈現了。

code {

background: rgb(248 , 249 , 250); 

border: solid 1px #e1e1e1;

border-left: 3px solid rgb(33 , 176 , 249); 

box-shadow: rgba(0 , 0 , 0 , 0.12) 0px 3px 8px -1px; 

box-sizing: border-box; 

max-height: 300px; 

margin-bottom: 2.5rem; 

overflow: auto; 

padding: 6px 12px;

font-size: 15px;

font-family: monospace , monospace;

display: block;

clear: both;

color: #555555;

}

在靜態網頁的使用大約就如上圖所示，如果是使用 Blogger 或 Wordpress 等 CMS 系統，只要將上面提供的 CSS 加進 CSS 範本，然後在內文加入 <code></code> 就可以了。