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

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

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

---

google-code-prettify

---

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這隻原始碼高亮外掛，會自動的偵測，目前所輸入的原始碼，並顯示依原始碼語言，顯示高亮效果。

---

Step5
另一個讓梅干感到方便的是，當遇到HTML標籤時，只需在pre下再加入xmp的標籤，並直接輸入HTML標籤，完全不用轉碼，立即就可顯示HTML高亮效果，真的是超方便的，只能說相見恨晚。

---

#範例預覽