[工具] 將程式碼嵌入網頁的幾種方法

方法一 、.Net Fiddle + iFrame

1. 進入dotnetfiddle.net    

2. 點選上方Share按鈕

3. 複製iFrame連結

4. 結果:

    

5. 優缺點:

• 優點
• 可於網頁執行程式碼
• 適合完整可執行程式碼 
• 缺點
• 肥大且不適合片段程式碼 

方法二、Github Gist 

1. 進入Github gist

2. 輸入程式碼及檔名。gist是透過副檔名辨識該程式語言，因此必須輸入才會有syntax highlight

3.結果:

4.優缺點:

• 優點:
• 簡單，適合用於片段程式碼
• 缺點:
• 需上傳程式碼

方法三、Code Prettify

1. 於html 引入 prettify套件，加入這行:

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>

2.<pre class="prettyprint">加入程式碼</pre>

3.結果:

using System;
					
public class Program
{
	public static void Main()
	{
		Console.WriteLine("Hello World");
	}
}

4.優缺點:

• 優點
• 方便易用
• 可透過引用參數改變皮膚，例如:
• <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=desert"></script>
• 彈性大，可自訂css 製作獨一無二的syntax highlight
• 缺點
• 對於不會html、css的人可能較難上手

方法四、其他產生Syntax highlight網站

1. 例如  hilite.me

2. 複製產生之html並貼上即可

3. 結果

1 2 3 4 5 6 7 8 9

using System; public class Program { public static void Main() { Console.WriteLine("Hello World"); } }

4. 優缺點

• 優點
• 簡單好用
• 可改變皮膚