在網頁中顯示HTML碼

以下是記錄在製作網頁時,怎樣在網頁中顯示程式碼:
使用工具有(1)Visual Studio Code(用作網頁編輯) , (2)code-prettify(使程式碼有顏色顯示,就像在IDE中的程式碼一樣)。

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

~~ 完成 ~~

** 本文同時會張貼在我的google blog: https://leotseblog.blogspot.com **

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。