1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. Snippet Shot 一鍵快速產生,高亮的原始碼縮圖
網頁開發 網頁設計

Snippet Shot 一鍵快速產生,高亮的原始碼縮圖

2020/08/03

梅問題-Snippet Shot 一鍵快速產生,高亮原始碼縮圖
  每當在分享網頁相關特效時,梅干就會將網頁的原始碼,顯示在畫面中,讓大家透過原始碼,可以快速的了解整個架構與方法,甚至也可直接複製裡面的原始碼,因此透過原始碼可說是一個相當容易溝通的橋樑,但這也是最讓梅干感到頭大的,最主要的原因就在於,當使用文字型的原始碼遇到RWD時,畫面愈小原始碥就會斷的愈亂,反而不易閱讀,因此最近梅干發現一個超棒的平台,可將原始碼轉成圖檔,同時還能保有原始碼的高亮效果,由於本身是圖片格式,因此當畫面縮小時,依然可保有原始碼原來的顯示方式,相當的方便好用,而有需要的朋友,現在也一塊來看看囉!

Snippet Shot

網站名稱:Snippet Shot
網站連結:https://www.snippetshot.com/?ref=key.chtouch.com

Step1
首先在進入Snippet Shot的網站後,直接將原始碼貼到黑色區塊。
梅問題-Snippet Shot 一鍵快速產生,高亮原始碼縮圖
Step2
接著再選擇原始碼的語言。
梅問題-Snippet Shot 一鍵快速產生,高亮原始碼縮圖
Step3
當設定完畢,原始碼就會依照所選的語言變換顏色,讓在閱讀上更易理解,接著可由右下角,設定原始碼的的顯示寬度。
梅問題-Snippet Shot 一鍵快速產生,高亮原始碼縮圖
Step4
接著再設定圖檔格式,與原始碼出處。
梅問題-Snippet Shot 一鍵快速產生,高亮原始碼縮圖
Step5
再按下方的下載鈕,就可將原始碼給下載回來了。
梅問題-Snippet Shot 一鍵快速產生,高亮原始碼縮圖
Step6
如此一下來,無論在閱讀上,還是顯示也更加的清楚易懂啦!
梅問題-Snippet Shot 一鍵快速產生,高亮原始碼縮圖