貓城
BLACKCAT CASTLE

如何讓文章顯示CODE(程式碼、代碼)的語法

   49 VIEWS
如何讓文章顯示CODE(程式碼、代碼)

歡迎來到黑貓城,我是時雨の町站長 ─ 時雨。

一般我們直接打code會直接執行程式,例如打 <span style="color:red">紅色</span>,那麼前台網頁顯示就會直接變成:紅色,而不是我們想要顯示的程式碼。

如果想要顯示程式碼就必須將 code 也做轉換,也就是把< >這個括號改為特殊字元:
&lt;&gt;

以剛剛的<span style="color:red">紅色</span>為例,就要寫成&lt;span style="color:red"&gt;紅色&lt;/span&gt;

是不是有點複雜呢?😅

其實只要注意< >要改為&lt;&gt;這樣就可以純粹顯示 code 了。

知道如何顯示 code 之後我們就要設計一個呈現 code 的專屬框框了,大部分的人會直接嵌入 GitHub 的 gists 來呈現語法內容,優點是美觀功能多,缺點是如果哪一天掛了就沒了,或是會影響網頁速度等,簡單說就是用別人的套件就會有失效、網頁連線速度延遲等風險,當然由於很多人在用,幾乎不用擔心未來的風險,有興趣的話也可以直接去下載 GitHub ,本篇做為基本網頁程式碼的寫法,因此只討論最原始的作法。

1. 在 CSS 檔案中新增code
code {
display: block; /* 區塊 */
font-family: Courier New; /* 字型 */
font-size: 10pt; /* 文字大小 */
color:ccc; /* 文字顏色 */
overflow:auto; /* 自動使用卷軸 */
background: #444 url(背景圖) left top repeat-y; /* 背景 */
border: 1px solid #999; /* 框框 */
padding: 5px 10px 5px 21px; /* 內間距 */
margin: 5px 0; /* 外間距 */
max-height:200px; /* 最大長度 */
line-height: 1.2em; /* 行距 */
}
↑ 背景圖請自行設計,懶得設計?點此下載code背景圖
※ 在{}中可以自行調整設計文字大小、背景顏色等。

2. 在文章的原始碼中,將程式碼貼在<code> </code>之間

3. 記得將括號< >改為&lt; &gt;

【範例】
原始碼:
<code>&lt;div stlye="display:black;"&gt;&lt;/div&gt;</code>
呈現的效果:
<div stlye="display:black;"></div>


時雨 時雨,時雨の町-日文學習園地站長,為了紀錄網站維護的日誌而架設本網站,並以家中黑貓命名為黑貓城,順道分享各種架站知識與相關的網頁程式語言,如果你喜歡我的文章,請幫我按讚哦(*´ω`*)。也歡迎各位到我的日語教學網站學習日文 :)

LEAVE A REPLY

COMMENTS