1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. hilite.me 線上一鍵將原始碼轉高亮效果,網頁免再加載Javascript、CSS

hilite.me 線上一鍵將原始碼轉高亮效果,網頁免再加載Javascript、CSS

2017/11/13

梅問題-hilite.me 線上一鍵將原始碼轉高亮化效果,免加載Javascript、CSS

  由於梅干時常會分享一下網頁設計的技巧,而這中間免不了,得張貼一些原始碼,而為了讓原始碼,有縮排、行號、高亮效果,因此先前梅干也用過幾套,原始碼外掛程式,讓原始碼有紅、有綠、有黃,如此一來比較容易閱讀,同時也容易理解每個原始碼的結構,雖然用套件,可完實現原始碼高亮效果,但卻時常造成跑版問題,以及當套用後,也無法再自行更改原始碼的顏色或再加標註。


  因此梅干找了很久,終於找到一個線上原始碼的轉換器,一鍵就能將原始碼,變成有高亮效果,同時還可設定原始碼高亮的樣式,甚至還有原始碼的行號,更酷的是,這個轉換完後,只需將轉好的HTML碼,直接貼到網頁中,就會有高亮效果,完全無需再加載任何的javascript或css,同時也不會有跑版的問題,更重要的是轉換過程相當的簡單,只需一鍵立即就可完成轉換,因此有需要張貼原始碼的朋友,現在不坊也一塊來看看囉!


hilite.me

網站名稱:hilite.me
連結網址:http://hilite.me/

Step1
首先進到「hilite.me」,將要轉換的原始碼,貼到左邊的框框中。
梅問題-hilite.me 線上一鍵將原始碼轉高亮化效果,免加載Javascript、CSS


Step2
接著選擇程式碼的語言,不同語言會有不同的高亮效果,所以請務必選擇正確。
梅問題-hilite.me 線上一鍵將原始碼轉高亮化效果,免加載Javascript、CSS


Step3
再選擇高亮的樣式。
梅問題-hilite.me 線上一鍵將原始碼轉高亮化效果,免加載Javascript、CSS


Step4
都設定好後,再按「Highlight」鈕。
梅問題-hilite.me 線上一鍵將原始碼轉高亮化效果,免加載Javascript、CSS


Step5
當轉換完畢後,在下方的Preview可看到轉換後的高亮的效果,若沒問題的時,再把右上的HTML整個複製起來。
梅問題-hilite.me 線上一鍵將原始碼轉高亮化效果,免加載Javascript、CSS


Step6
接著再貼到網頁中。
梅問題-hilite.me 線上一鍵將原始碼轉高亮化效果,免加載Javascript、CSS


Step7
鏘!鏘!由於該平台,是將所有的效果,寫在這個HTML中,因此網頁完全無需再加載,任何的javascript或css就有高亮效果啦!
梅問題-hilite.me 線上一鍵將原始碼轉高亮化效果,免加載Javascript、CSS