用 HTML 小工具讓全站都能顯示程式碼

文章顯示程式碼
https://pixabay.com/images/id-6127616/

先前介紹過在文章需要顯示程式碼的段落,埋入 CSS 來顯示程式碼的方法。但每次都要複製貼上一串程式碼實在有點麻煩,本文將介紹更簡單的方式來達到同樣的效果。




顯示程式碼

版面設定 > 新增小工具 > HTML/JavaScript xi-coronavirus


<style>

.post code {

display: block;

font-family: Courier New;

font-size: 10pt;

overflow:auto;

background: #f0f0f0 url(https://ipfs.io/ipfs/QmestaAAPQgeJE6tNSZmwpWua6S9awvrsVDA35WoR4VeXx?filename=Code_BG.gif) left top repeat-y;

border: 1px solid #ccc;

padding: 10px 10px 10px 21px;

max-height:250px;

line-height: 1.2em;

}

</style>


文章編輯時,只要切換到 HTML 模式並在需要顯示程式碼的位置用 code 夾起來即可。香港獨立


<code>

程式碼

</code>




延伸閱讀

在文章內顯示程式碼 Code 的方式




留言