搜尋

  1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. Google Code Prettify 會自動判斷原始碼,並顯示高亮效果教學

Google Code Prettify 會自動判斷原始碼,並顯示高亮效果教學

2021/10/28

梅問題-Google Code Prettify 會自動判斷原始碼,並顯示高亮效果
  先前梅干曾分享過不少的顯示原始碼的套件,當輸入原始碼後就會產生出高亮的效果,讓在瀏覽原始碼時,不再像無字天書一樣的密密碼碼,但無論使用那一個套件,讓梅干感到最不便的就是,得依照輸入原始碼的類型,設定不同的語系,才能讓輸入的原始碼有高亮的效果,但說真的每隔一段時就忘了,到底要用什麼代稱,甚至當要使用HTML標籤,就得先轉編碼,才不會出現原始碼被吃掉的問題。

直到最近梅干才發現,原來Google官方也有推出原始碼亮度的模組,甚至還會自動判斷輸入的原始碼,並顯示該語言的高亮效果,同時支援的語言也相當的多,且當需要輸入HTML標籤也完全不用轉編碼,直接將HTML標籤輸入後,立即就會顯示,因此你也需要顯示原始碼的朋友,Google Code Prettify這外掛模組可別錯過了。


google-code-prettify
連結網址:https://code.google.com/archive/p/google-code-prettify/
支援語言:"bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml", "xsl"

Step1
首先,先將javascript載入至網頁中。
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>

Step2
接著加入以下樣式,才能顯示原始碼行數。
.prettyprint ol.linenums > li {
  list-style-type: decimal;
  padding-left:10px;
}

Step3
都弄好後,接下來要載入原始碼時,只需在HTML加入以下標籤,再把原始碼放置在pre標籤中。
<pre class="prettyprint linenums">
&hellip;..原始碼</pre>

Step4
而讓梅干感到最方便的是,Google這隻原始碼高亮外掛,會自動的偵測,目前所輸入的原始碼,並顯示依原始碼語言,顯示高亮效果。
梅問題-Google Code Prettify 會自動判斷原始碼,並顯示高亮效果
Step5
另一個讓梅干感到方便的是,當遇到HTML標籤時,只需在pre下再加入xmp的標籤,並直接輸入HTML標籤,完全不用轉碼,立即就可顯示HTML高亮效果,真的是超方便的,只能說相見恨晚。
梅問題-Google Code Prettify 會自動判斷原始碼,並顯示高亮效果
#範例預覽


友好網站  樂活大方 | 男丁格爾

回應本文