跳到主要內容

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

留言

張貼留言



這個網誌中的熱門文章

WinRAR - 繁體中文版、免費版,別再破解了,老牌壓縮軟體直接免費給你用

WinRAR 應該對於所有 Windows 使用者一點都不陌生,可能也是很多人壓縮、解壓縮檔案的首選,舉凡 RAR、ZIP、7-Zip、TAR ...等檔案格式都可以處理,製作自解壓縮 (.EXE) 檔也沒問題,也算是最老牌的解壓縮軟體之一。 WinRAR 官方網站 :  https://www.win-rar.com 繁體中文版 :  https://rar.tw/download.html 永久免費簡體版 :  http://www.winrar.com.cn/download.htm 其實我也不太理解為什麼一個 WinRAR 可以有這麼多版本、不同語系的官網,畢竟在最原始的官網內也有「漢語」(簡體中文) 的選項,所以其他的國家自己的官網算代理商嗎? 如果真的要說我會比較建議到 英文版的官網 下載,畢竟這種軟體轉了一手又一手,加了什麼都不知道。

Linux (Ubuntu) 查詢硬碟容量、剩餘大小指令

在 Ubuntu Desktop 版本或有安裝 GUI 像 Xfce 的 Server 版本當然可以直接從圖形介面查看硬碟容量和已經使用的大小, 但如果是在純 CLI 版本或使用 SSH 連線時呢?那就需要用到指令了。 顯示硬碟容量、已使用、可用大小。 df -h 查詢資料夾所占硬碟的大小。 du -h 查詢檔案大小 ls -l

ccminer N卡挖礦程式教學 - 支援幾乎所有加密貨幣算法,要挖什麼幣一次就搞定

ccminer 是使用 Nvidia CUDA 技術的挖礦程式,所以如果你是使用 AMD GPU 的話這可能就派不上用場了,可以參考 A卡 N卡兼容的 XMR-STAK (CryptoNight)。 那 ccminer 方便的點在於它適用非常多加密貨幣算法 (詳見下表) ,所以只要裝了一個挖礦程式就能抵 N 個用,非常方便。 ccminer 支援的算法、加密貨幣 :                           bastion     use to mine Joincoin                           bitcore     use to mine Bitcore's Timetravel10                           blake       use to mine Saffroncoin (Blake256)                           blakecoin   use to mine Old Blake 256                           blake2s     use to mine Nevacoin (Blake2-S 256)                   ...