瀏覽器還能這樣用？！

2024-02-16科技

你好，我是堅持分享幹貨的 EarlGrey，轉譯出版過【Python編程無師自通】、【Python平行計算手冊】等技術書籍。

如果我的分享對你有幫助，請 關註我 ，一起向上進擊。

瀏覽器不是用來瀏覽網頁、觀看網路視訊的嗎？難道還可以在瀏覽器裏碼程式碼嗎？

沒錯！ 真的可以 。現在已經有很多類似JSFiddle、JSBin這樣線上編輯程式碼的網站，不過我們今天要分享的方法並不需要註冊第三方網站，只需要在瀏覽器的位址列輸入一行程式碼即可。我們首先來看一下具體的效果。

編輯器裏的Python程式碼

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

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

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

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

Jose分享的程式碼如下：

data:text/html, <html contenteditable >

只需要將上面的程式碼復制貼上到瀏覽器的位址列，然後按回車，就可以讓瀏覽器變成編輯器。是不是非常簡單？

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

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

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

出現各種衍生版本

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

自動切換背景顏色

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

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=;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;rem;margin:0 auto;padding:4rem;' >

筆記本樣式

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

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 .getElementsBy className('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 編輯器效果