【教學】怎麼在網頁上嵌入程式碼?顯示原始Code與&等特殊符號。

webcode


要在網站中放入php,css,html,javascript等語法教學,但無法正常顯示原始碼,可以利用一些方法或網站來達到嵌入程式碼的效果;另外特殊字元(&、<、>)在HTML有時候會顯示不出來,這時候我們可以利用一些實體參考字元來轉換這些字,就能在網頁中正常顯示。





HTML 特殊字元轉換 教學

(請用半形文字)

要顯示&以&amp;取代
要顯示<以&lt;取代
要顯示>以&gt;取代
要顯示"以&quot;取代
要顯示'以&apos;取代

你可以直接用:線上將HTML程式碼轉文字的工具




在網頁中顯示程式原始碼 教學
方法1

<pre>將要展示的程式碼包在這裡面</pre>

     body {    direction: rtl;    unicode-bidi: embed;}
 
方法2

<blockquote>將程式碼包在這裡面</blockquote>

body { direction: rtl; unicode-bidi: embed;}

方法3

藉助外部網站:GitHub原始程式碼編輯器(需註冊),來快速產生如下圖的程式顯示框。

操作步驟教學為前往GitHub,將1.程式碼放入2.點Creat public gist。
在網頁顯示程式碼

複製Embed這段嵌入碼,將複製的程式碼貼到網頁中即可。
在網頁顯示程式碼2

其他還能嵌入的編輯器有:CodePen線上編輯器hilite.me線上程式碼高光Highlight工具

GitHub原始程式碼編輯器(需註冊,才可進入編輯區)




你可能有興趣



網頁上撰寫程式:CodePen線上編輯器
Disable right click:網站禁止點擊右鍵的程式碼產生器