以下是記錄在製作網頁時，怎樣在網頁中顯示程式碼：
使用工具有(1)Visual Studio Code(用作網頁編輯） , (2)code-prettify(使程式碼有顏色顯示，就像在IDE中的程式碼一樣)。
- 在VS code中開啟一個新的檔案(此以index.html 作記錄)，並在編輯區輸入’html’,此時VS code 會有一些選擇提供，請選擇’html:5′,VS code就會自動把html的結構載入:
- 在HTML程式碼中加入欲顯示的程式碼，此處以<pre><code>…</code></pre>括着欲顯示之程式碼：
- 用瀏覽器打開剛剛的網頁，會發現欲想顯示的程式碼會被瀏覽器編譯出來：
- 現開始把欲想顯示的程式碼使用code-prettify加入顏色及使用VS code中的replace功能把程式碼顯示。
- 先Search ‘code-prettify’,GitHub網諳的那個google/code-prettify就對了:
- 在github中按Clone and Download ZIP：
- 儲存在與剛剛建立的網頁檔案中並解壓：
- 在GitHub的網站上有教怎樣使用code-prettify的，其實可以在不Download的情況下使用，但現在只是自行測試，所以download下來使用，根據指示，是要導入run_prettify.js的JavaScript檔案，並在<pre>中加入class=”prettyprint”：
- 由於run-prettify的檔案在自己的電腦內，所以src的path也要改改，在<head></head>內加入<script src=”code-prettify-master/loader/run-prettify.js”></script>，並在<pre>加入class=”prettyprint”：
- 那顯示程式碼色彩的部份便完成，接下來是把html 碼的 ‘<‘ 轉成 ‘<’ 以讓瀏覽器不認定那些是html 標籤，做法是先把那段程式碼選起來：
- 再在VS Code 中選擇Edit > Replace :
- 先按下右手邊那3橫(Find in selection),再在左手邊的Find鍵入 ‘<‘, Replace 鍵入’ <’ :
- 之按下Replace那行最右手的那個鍵 Replace all :
- 此時所選的那段程式碼中的 ‘<‘ 己更換成 ‘<’ 了：
- 現在回到瀏覽器再重新載入測試頁，便會顯示那段程式碼了：
- 如想在顯示的程式碼中加入行號，只需要在<pre>中那多個class ‘linenums’ 便行：
- 儲存檔案後再重新載入測試頁：
~~ 完成 ~~
＊＊ 本文同時會張貼在我的google blog: https://leotseblog.blogspot.com ＊＊