http://mp.weixin.qq.com/s?__biz=MzAwNDc0MTUxMw==&mid=401904539&idx=1&sn=efb4ca8b181489bc91956a8be1abb36e&scene=0#wechat_redirect


2016-03-15 EarlGrey 编程派

让浏览器变身代码编辑器_第1张图片

浏览器不是用来浏览网页、观看网络视频的吗？难道还可以在浏览器里码代码吗？


没错！真的可以。现在已经有很多类似JSFiddle、JSBin这样在线编辑代码的网站，不过我们今天要分享的方法并不需要注册第三方网站，只需要在浏览器的地址栏输入一行代码即可。我们首先来看一下具体的效果。


让浏览器变身代码编辑器_第2张图片

编辑器里的Python代码


上面这幅图中，我们发现在浏览器中可以输入Python代码，而且支持语法高亮和自动缩进功能。那么，这究竟是怎么实现的呢？


这其实可以追溯到2012年时，一位叫Jose Aguinaga的国外开发者在Coderwall上分享的一个小贴士。


将浏览器变成一个简易文本编辑器


一开始的功能非常简单，根本没有语法高亮，也没有自动缩进，仅仅是将浏览器变成一个文本编辑器而已。


Jose分享的代码如下：


data:text/html, 


只需要将上面的代码复制粘贴到浏览器的地址栏，然后按回车，就可以让浏览器变成编辑器。是不是非常简单？


背后的原理并不高深，只是用到了Data URI格式而已。这行代码告诉浏览器渲染一个HTML页面，而这个页面具备一个H5属性：contenteditable。


Data URI是由RFC 2397定义的一种把小文件直接嵌入文档的方案。格式如下：data:[][;charset=][;base64],。其实整体可以视为三部分，即声明：参数+数据，逗号左边的是各种参数，右边的是数据。


请想尝试的朋友注意，这行代码只适用于Chrome等现代浏览器。如果你还在使用IE8等过时浏览器的话，是没有效果的。


让浏览器变身代码编辑器_第3张图片

出现各种衍生版本


由于上面这个小技巧的出现，激发了许多开发者的的激情，不断分享自己的版本。


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, TextEditor      
  

让浏览器变身代码编辑器_第4张图片

笔记本样式的浏览器编辑器


如何变身Python编辑器？


接下来，我们来看怎样将浏览器打造成Python编辑器。只需要在地址栏输入下面的代码即可：


data:text/html, .e{position:absolute;top:0;right:0;bottom:0;left:0;}