http://mp.weixin.qq.com/s?__biz=MzAwNDc0MTUxMw==&mid=401904539&idx=1&sn=efb4ca8b181489bc91956a8be1abb36e&scene=0#wechat_redirect
2016-03-15?EarlGrey?編程派
瀏覽器不是用來瀏覽網頁、觀看網絡視頻的嗎？難道還可以在瀏覽器里碼代碼嗎？
沒錯！真的可以。現在已經有很多類似JSFiddle、JSBin這樣在線編輯代碼的網站，不過我們今天要分享的方法并不需要注冊第三方網站，只需要在瀏覽器的地址欄輸入一行代碼即可。我們首先來看一下具體的效果。
編輯器里的Python代碼
上面這幅圖中，我們發現在瀏覽器中可以輸入Python代碼，而且支持語法高亮和自動縮進功能。那么，這究竟是怎么實現的呢？
這其實可以追溯到2012年時，一位叫Jose Aguinaga的國外開發者在Coderwall上分享的一個小貼士。
將瀏覽器變成一個簡易文本編輯器
一開始的功能非常簡單，根本沒有語法高亮，也沒有自動縮進，僅僅是將瀏覽器變成一個文本編輯器而已。
Jose分享的代碼如下：
data:text/html,?<html?contenteditable>
只需要將上面的代碼復制粘貼到瀏覽器的地址欄，然后按回車，就可以讓瀏覽器變成編輯器。是不是非常簡單？
背后的原理并不高深，只是用到了Data URI格式而已。這行代碼告訴瀏覽器渲染一個HTML頁面，而這個頁面具備一個H5屬性：contenteditable。
Data URI是由RFC 2397定義的一種把小文件直接嵌入文檔的方案。格式如下：data:[<MIME type>][;charset=<charset>][;base64],<encoded data>。其實整體可以視為三部分，即聲明：參數+數據，逗號左邊的是各種參數，右邊的是數據。
請想嘗試的朋友注意，這行代碼只適用于Chrome等現代瀏覽器。如果你還在使用IE8等過時瀏覽器的話，是沒有效果的。
出現各種衍生版本
由于上面這個小技巧的出現，激發了許多開發者的的激情，不斷分享自己的版本。
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;">
2筆記本樣式
下面這段代碼可以將瀏覽器頁面變成一個筆記本的樣式，看上去很有感覺：
data:text/html;charset=utf-8,?<title>TextEditor</title>?<link?rel="shortcut?icon"?href="http://g.etfv.co/https://docs.google.com"/>?<style>?html{height:100%;}?body{background:?-webkit-linear-gradient(#f0f0f0,?#fff);?padding:3%;?height:94%;}?.paper?{?font:?normal?12px/1.5?"Lucida?Grande",?arial,?sans-serif;?width:50%;?height:80%;?margin:?0?auto;?padding:?6px?5px?4px?42px;?position:?relative;?color:#444;?line-height:20px;?border:?1px?solid?#d2d2d2;?background:#fff;?background:?-webkit-gradient(linear,?0?0,?0?100%,?from(#d9eaf3),?color-stop(4%,?#fff))?0?4px;?background:?-webkit-linear-gradient(top,?#d9eaf3?0%,?#fff?8%)?0?4px;?background:?-moz-linear-gradient(top,?#d9eaf3?0%,?#fff?8%)?0?4px;?background:?-ms-linear-gradient(top,?#d9eaf3?0%,?#fff?8%)?0?4px;?background:?-o-linear-gradient(top,?#d9eaf3?0%,?#fff?8%)?0?4px;?background:?linear-gradient(top,?#d9eaf3?0%,?#fff?8%)?0?4px;?-webkit-background-size:?100%?20px;?-moz-background-size:?100%?20px;?-ms-background-size:?100%?20px;?-o-background-size:?100%?20px;?background-size:?100%?20px;?-webkit-border-radius:3px;?-moz-border-radius:3px;?border-radius:3px;?-webkit-box-shadow:?0?1px?2px?rgba(0,0,0,0.07);?-moz-box-shadow:?0?1px?2px?rgba(0,0,0,0.07);?box-shadow:?0?1px?2px?rgba(0,0,0,0.07);?}?.paper::before?{?content:?'';?position:?absolute;?width:4px;?top:0;?left:30px;?bottom:0;?border:?1px?solid;?border-color:?transparent?#efe4e4;?}?textarea{display:?block;?width:94%;margin:0?auto;padding:3.8%?3%;?border:?none;?outline:?none;?height:94%;?background:?transparent;?line-height:20px;}?</style>?<body?spellcheck="false">?<div?class="paper">?<textarea?autofocus="autofocus"></textarea>?</div>?</body>?</html>
筆記本樣式的瀏覽器編輯器
如何變身Python編輯器？
接下來，我們來看怎樣將瀏覽器打造成Python編輯器。只需要在地址欄輸入下面的代碼即可：
data:text/html,?<style?type="text/css">.e{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div?class="e"?id="editor"></div><script?src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js"?type="text/javascript"?charset="utf-8"></script><script>var?e=ace.edit("editor");e.setTheme("ace/theme/textmate");e.getSession().setMode("ace/mode/python");</script>
這段代碼是由jdkanani在Github上分享的。
事實上，我們只要簡單修改一下上面的代碼，就可以馬上將瀏覽器變成其他語言的編輯器，包括Markdown、C/C++、Javscript、Java等幾乎所有編程語言。你所要做的，只是將代碼中的ace/mode/python，修改成ace/mode/相應的語言（如java）即可。
除了支持多種語言，它還支持更改頁面主題！Eclipse、Github、Textmate等眾多經典主題，統統支持！
只需要將ace/theme/textmate中的textmate替換成你喜歡的主題即可，如monokai。
渲染Markdown文本
如果你習慣于用Markdown語法寫作，你或許會希望直接在頁面中查看渲染后的效果。只需要輸入下面這行代碼即可：
data:text/html,<style?type="text/css">.e{position:absolute;top:0;right:50%;bottom:0;left:0;}?.c{position:absolute;overflow:auto;top:0;right:0;bottom:0;left:50%;}</style><div?class="e"?id="editor"></div><div?class="c"></div><script?src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js"?type="text/javascript"?charset="utf-8"></script><script?src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script><script>?function?showResult(e){consoleEl.innerHTML=e}var?e=ace.edit("editor");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/markdown");var?consoleEl=document.getElementsByClassName("c")[0];var?converter=new?Showdown.converter;e.commands.addCommand({name:"markdown",bindKey:{win:"Ctrl-M",mac:"Command-M"},exec:function(t){var?n=e.getSession().getMode().$id;if(n=="ace/mode/markdown"){showResult(converter.makeHtml(t.getValue()))}},readOnly:true})</script>
輸入Markdown代碼之后，然后按Ctrl+M或Command+M，就可以將代碼轉換成HTML。
渲染Markdown代碼
背后的原理
看了這幾個例子之后，大家可能已經明白了：這些示例都是通過Data URI格式讓瀏覽器渲染一段HTML代碼。而編輯器相關的樣式已經寫在了代碼中。這與將相應的HTML代碼放在單獨文件中打開的效果是相同的。
而在前兩個例子中，代碼中實際用到了一個叫ace.js的文件，不知道大家注意到沒有？據小編了解，Ace是一個用JavaScript編寫的可嵌入式代碼編輯器，據稱和Sublime、Vim和TextMate等原生編輯的功能和性能相當。而且，它還可以非常容易滴嵌入到任意網頁或JavaScript應用中。
而Ace也是一個叫Cloud9IDE的在線集成開發環境所使用的主要編輯器。具體效果請看下圖：
Cloud9IDE 編輯器效果
SlimText
程序員都是愛折騰的物種。有的開發者還是不滿足于上面那種手動輸入代碼、將瀏覽器變成編輯器的方法，甚至是直接將真正的編輯器搬到了瀏覽器中運行。這就是我們最后要介紹的SlimText，下面是具體截圖。
SlimText截圖
如截圖所示，SlimText是一個真正的瀏覽器端代碼編輯器，以Chrome插件的形式存在，文件結構、文件搜索、文件保存等功能一應具有。它是一位名叫tylerlong的國人開發的，支持Windows、Linux和Mac OS X等多個平臺。
感興趣的話，建議你直接通過Chrome Web Store安裝。Windows 8 系統下安裝后如果碰到問題，請以Windows 7兼容模式運行Chrome。
轉載于:https://blog.51cto.com/tianshili/1751192
總結
以上是生活随笔為你收集整理的让浏览器变身代码编辑器的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
