
Google Chrome瀏覽器的應用程式商店中,有各式各樣的擴充程式可用,由於梅干習慣使用Sublime Text來編輯網頁,一來是可永久免費的試用外,再來就是也有許多外掛可安裝,但說真的安裝了那麼多,讓梅干最常使用的,還是Emmet這外掛,透過它的快速鍵產生html編碼,讓在編寫網頁更加的快速,同時也不會有多一個div或少一個div的問題,所以先前就有在關注,在Chrome瀏覽器下,是否有像是Sublime Text一樣的網頁編輯器。
找了好久,終於在最近發現了一套名為Keypress Editor編輯器,不但可附掛在Chrome瀏覽器中,且是一個獨立版的應用程式,因此即便離線也可使用,更棒的是內建就有Emmet套件,同時打開Chome瀏覽器立即就能使用,因此無論走到那,只要有Chrome的地方,就有編輯器,且Keypress Editor無論在介面還是使用上,都與Sublime Text相似,就連設定上也差不多,同時也可以加入專案,因此完全不會有不適感,現在就一塊來看看Keypress Editor這套網頁編輯器吧!
Keypress Editor
Step1
進到Keypress Editor的安裝畫面後,先點右上的「加到Chrome」鈕。

Step2
再點「新增應用程式」鈕。

Step3
當安裝完畢後,就會在Chrome瀏覽器的應用程式中。

Step4
點一下開啟後,可按下方的「not now」就可開始使用。

Step5
整個操作界面跟Sublime Text有沒有一模模一樣樣。

Step6
同時在Keypress Editor編輯器中,也可設定自己喜愛的面板樣式。

Step7
以及原始碼的空格間距,一般梅干比較習慣設定2。

Step8
同樣的當開新檔案時,預設都是文字檔,這時可從上方的功能表的「View/Syntax」設定要編輯文件的模式。

Step9
當設定為html模式時,對著編輯器工作區域,輸入!。

Step10
接著再按下「Tab」鍵,就會自動產生HTML網頁的基本架構。

Step11
當輸入完後,再按Tab鍵,也會隨即的產生html標籤,由於內建Emmet因此在寫作更加方便。

Step12
甚至也可將整個專案加入與編輯php,因此身為網頁設計師的你,這個Chrome版的網頁編輯器,可別錯過了。
