瀏覽器 1 秒變身 Python 編輯器！

這是早期的一篇文章，分享的內容我到現在還是覺得非常有意思。

EarlGrey@編程派

瀏覽器不是用來瀏覽網頁、觀看網路視頻的嗎？難道還可以在瀏覽器里碼代碼嗎？

沒錯！真的可以。

現在已經有很多類似JSFiddle、JSBin這樣在線編輯代碼的網站，不過我們今天要分享的方法並不需要註冊第三方網站，只需要在瀏覽器的地址欄輸入一行代碼即可。

我們首先來看一下具體的效果。

上面這幅圖中，我們發現在瀏覽器中可以輸入Python代碼，而且支持語法高亮和自動縮進功能。那麼，這究竟是怎麼實現的呢？

這其實可以追溯到2012年時，一位叫Jose Aguinaga的國外開發者在Coderwall上分享的一個小貼士。

將瀏覽器變成一個簡易文本編輯器

一開始的功能非常簡單，根本沒有語法高亮，也沒有自動縮進，僅僅是將瀏覽器變成一個文本編輯器而已。

代碼如下：

只需要將上面的代碼複製粘貼到瀏覽器的地址欄，然後按回車，就可以讓瀏覽器變成編輯器。是不是非常簡單？

背後的原理並不高深，只是用到了Data URI格式而已。這行代碼告訴瀏覽器渲染一個HTML頁面，而這個頁面具備一個H5屬性：contenteditable。

Data URI是由RFC 2397定義的一種把小文件直接嵌入文檔的方案。格式如下：data:[][;charset=][;base64],。其實整體可以視為三部分，即聲明：參數 數據，逗號左邊的是各種參數，右邊的是數據。

請想嘗試的朋友注意，這行代碼只適用於Chrome等現代瀏覽器。如果你還在使用IE8等過時瀏覽器的話，是沒有效果的。

各種樣式衍生而出

由於上面這個小技巧的出現，激發了許多開發者的的激情，不斷分享自己的版本。

自動切換背景顏色

下面這段代碼，可以讓編輯器在你一邊打字時，一遍切換背景顏色：

筆記本樣式

下面這段代碼可以將瀏覽器頁面變成一個筆記本的樣式，看上去很有感覺：

如何變身Python編輯器？

接下來，我們來看怎樣將瀏覽器打造成Python編輯器。只需要在地址欄輸入下面的代碼即可：

這段代碼是由jdkanani在Github上分享的。

事實上，我們只要簡單修改一下上面的代碼，就可以馬上將瀏覽器變成其他語言的編輯器，包括Markdown、C/C 、Javscript、Java等幾乎所有編程語言。你所要做的，只是將代碼中的 ，修改成 即可。

除了支持多種語言，它還支持更改頁面主題！Eclipse、Github、Textmate等眾多經典主題，統統支持！只需要將 中的textmate替換成你喜歡的主題即可，如monokai。

渲染Markdown文本

如果你習慣於用Markdown語法寫作，你或許會希望直接在頁面中查看渲染後的效果。只需要輸入下面這行代碼即可：

輸入Markdown代碼之後，然後按Ctrl M或Command M，就可以將代碼轉換成HTML。

背後的原理

看了這幾個例子之後，大家可能已經明白了：這些示例都是通過Data URI格式讓瀏覽器渲染一段HTML代碼。而編輯器相關的樣式已經寫在了代碼中。這與將相應的HTML代碼放在單獨文件中打開的效果是相同的。

而在前兩個例子中，代碼中實際用到了一個叫ace.js的文件，不知道大家注意到沒有？據小編了解，Ace是一個用JavaScript編寫的可嵌入式代碼編輯器，據稱和Sublime、Vim和TextMate等原生編輯的功能和性能相當。而且，它還可以非常容易滴嵌入到任意網頁或JavaScript應用中。

而Ace也是一個叫Cloud9IDE的在線集成開發環境所使用的主要編輯器。具體效果請看下圖：

SlimText

程序員都是愛折騰的物種。有的開發者還是不滿足於上面那種手動輸入代碼、將瀏覽器變成編輯器的方法，甚至是直接將真正的編輯器搬到了瀏覽器中運行。這就是我們最後要介紹的SlimText，下面是具體截圖。

如截圖所示，SlimText是一個真正的瀏覽器端的代碼編輯器，以Chrome插件的形式存在，文件結構、文件搜索、文件保存等功能一應具有。它是一位名叫tylerlong的國人開發的，支持Windows、Linux和Mac OS X等多個平台。

感興趣的話，建議你直接通過Chrome Web Store安裝。

回復下方「關鍵詞」，獲取優質資源

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！