如何在網頁上漂亮的嵌入程式碼？使用 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> 就可以了。