這是 Jose 在CoderWall 分享的一個小技巧：在瀏覽器位址列中輸入下面這行程式碼，回車即可把瀏覽器變臨時編輯器。
|
1 |
data:text/html, <html contenteditable> |
為什麼它能奏效？
這是用了資料URI的格式（Data URI’s format），並告訴瀏覽器渲染 HTML。不過 contenteditable 是 HTML5 的一個新全域性屬性，所以這個小技巧只能用於支援該屬性的現代瀏覽器。（IE 8 – 就不行了 :( ）
並非只能純文字，也可貼上圖片（如下圖）。趕緊複製貼上那行程式碼，然後回車，來試試唄。
有趣的內容還在下面
不少程式設計師受 Jose 的啟發，開始對這行程式碼加工改造了。
● jakeonrails 童鞋改成了一個支援 Ruby 程式碼高亮的編輯器 https://gist.github.com/4666256
程式碼：
|
1 |
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="http://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> |
● slawdan 提示說：如果把上面的 ace/mode/ruby 改成 ace/mode/python，那麼就得到了一個 Python 版的編輯器咯。其他語言依此類推。
● jdkanani 後來的補充：（2013-1-30 22:06:48 更新）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
改造成支援其他語言語法高亮的，可把 ace/mode/ruby 替換為： Python -> ace/mode/python C/C++ -> ace/mode/c_cpp Javscript -> ace/mode/javascript Java -> ace/mode/java Scala -> ace/mode/scala Markdown -> ace/mode/markdown CoffeeScript -> ace/mode/coffee 其他…… jakeonrails 語法高亮風格用的是 monokai。 如果需要換成其他風格，，可把 ace/theme/monokai 替換為： Eclipse -> ace/theme/eclipse TextMate -> ace/theme/textmate 其他…… |
不想複製貼上程式碼的懶漢童鞋，可以直接戳下面這些連結：
Ruby 編輯器 、Python 編輯器、PHP 編輯器 、Javascript 編輯器 、Java 編輯器 、C/C++ 編輯器 （也可把這些連結作為瀏覽器書籤收藏哦。）
● montas 的改造：You can use textarea and make it “invisible” if you want autofocus.
|
1 |
data:text/html, <textarea style="font-size: 1.5em; width: 100%; height: 100%; border: none; outline: none" autofocus /> |
或直接戳 連結。
● bgrins 的改造：編輯內容時，自動變換背景顏色；停止後變換白色。
|
1 |
data:text/html, <html><head><link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><style type="text/css"> html { font-family: "Open Sans" } * { -webkit-transition: all linear 1s; }</style><script>window.onload=function(){var e=false;var t=0;setInterval(function(){if(!e){t=Math.round(Math.max(0,t-Math.max(t/3,1)))}var n=(255-t*2).toString(16);document.body.style.backgroundColor="#ff"+n+""+n},1e3);var n=null;document.onkeydown=function(){t=Math.min(128,t+2);e=true;clearTimeout(n);n=setTimeout(function(){e=false},1500)}}</script></head><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;"> |
● fvsch 的改造：
|
1 |
data:text/html, <body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;"> |
或直接戳 連結。
這些個奇淫技巧就到此為止吧。
打賞支援我寫出更多好文章，謝謝！
打賞作者
打賞支援我寫出更多好文章，謝謝！
任選一種支付方式
