網設必知-將Google Chrome瀏覽器變成網頁編輯器(html、css、js、php)

梅問題-網設必知-將Google Chrome瀏覽器變成網頁編輯器(html、css、js、php)
  先前曾介紹過,將Google Chrome瀏覽器變成臨時的記事本,而除了變成記事本外,Google Chrome瀏覽器還可變成網頁編輯器,無論是html、css、javascript、php...都可使用,同時還會依照不同的程式碼變換顏色,對於梅干來說相當的方便,有時梅干會將一些還沒用到的原始碼,暫時先貼到記事本中,等要用到時,再一一的貼過來,雖然可用之前的文字模式,但看到一黑鴨鴨的程式碼,還真難辨視,現在只要修改一下之前的設定碼,立即就可將Chrome瀏覽器,變成網頁編輯器啦!真的很方便,至於要怎麼用,現在就一塊來看看吧!

若要將Chrome變成Javascript編輯器的話,只要在網址列輸入以下的參數。
data:text/html, <style type="text/css">#e{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div id="e"></div><script src="https://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("e");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/ruby");</script>
梅問題-網設必知-將Google Chrome瀏覽器變成網頁編輯器(html、css、js、php)
接著將這參數,加入書籤中,以便於日後使用。
梅問題-網設必知-將Google Chrome瀏覽器變成網頁編輯器(html、css、js、php)
馬上來測試看看,隨便貼個javascript的原始碼試看看,哈~不但原始碼會變色,且左邊還有原始碼行數。
梅問題-網設必知-將Google Chrome瀏覽器變成網頁編輯器(html、css、js、php)
其實剛的參數中只要將setMode("ace/mode/monokai")修改成,所需的的語言就可以了,例如:
Markdown : 'ace/mode/markdown'
Python: 'ace/mode/python'
C/C++ : 'ace/mode/c_cpp'
Javscript: 'ace/mode/javascript'
Java: 'ace/mode/java'
Scala: 'ace/mode/scala'
CoffeeScript: 'ace/mode/coffee'
css, html, php, latex, tex, sh, sql, lua, clojure, dart, typescript, go, groovy, json, jsp, less, lisp, lucene, perl, powershell, scss, textile, xml, yaml, xquery, liquid, diff and many more.

若懶的改,也可點下方的連結,直接複製語法,蠻怪的是只要直接輸入下方的連結,就會造成Wordpress貼文失敗,所以就麻煩各位,從下方的網頁中直接複製囉!
>>Google Chrome 網頁編輯器

相關文章

「W3layouts」上千個免費可商用RWD自適應版型下載

「W3layouts」上千個免費可商用RWD自適應版型下載

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用

「Mobirise」不懂網頁語法,拖拉就可完成精美、酷炫的RWD網頁工具

「Mobirise」不懂網頁語法,拖拉就可完成精美、酷炫的RWD網頁工具