奇技淫巧之浏览器秒秒钟变编辑器_好多开发人员在浏览器不知道输入了什么,浏览器就变成了类似于代码编辑器一样可以-CSDN博客

由来

有时，我仅仅想输入一些乱码。仅仅想放空自己。用编辑器来输入这些胡言乱语会使我很苦恼，因为这样会弄乱我项目的工作区。（我很挑剔，我懂得）

所以我就这么做。自从我生活在有浏览器的地方，我就只需打开新的标签，然后在地址栏里输入下面的内容：

data:text/html, <html contenteditable>

瞧，浏览器记事本。

为什么代码会有效

你不需要记住它。它不是 rocket science（哈哈，这里不是火箭科学，更不是那部电影，此处指艰深的学问以及复杂伤身的工作）。我们正在使用数据 URI 格式 Data URI's format 并且告诉浏览器对 html 进行渲染 (尝试一下"javascript:alert('Bazinga');")。html 所说的内容是一种带有 HTML 的 contenteditable（内容可编辑）的属性的 HTML line。这仅仅在能识别这种属性的现代的浏览器上是有效的。点击编辑吧！

以上就是翻译的全部内容，原文戳这里

效果图：

在作者发布这个消息之后，有很多的大神开始开动脑筋，绞尽脑汁，开始创作了各种碉堡的浏览器编辑器。下面这一款我比较喜欢的：

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/monokai");e.getSession().setMode("ace/mode/java");</script>

效果出众，最重要的是支持多种语言想用其它的语言的话，仅仅需要把ace/mode/python用下面的换掉即可：

Markdown -> `ace/mode/markdown`
Python -> `ace/mode/ruby`
C/C++ -> `ace/mode/c_cpp`
Javscript -> `ace/mode/javascript`
Java -> `ace/mode/java`
Scala- -> `ace/mode/scala`
CoffeeScript -> `ace/mode/coffee`
and 
css, html, php, latex, 
tex, sh, sql, lua, clojure, dart, typescript, go, groovy, json, jsp, less, lisp, 
lucene, perl, powershell, scss, textile, xml, yaml, xquery, liquid, diff and many more...

更碉堡的是，主题也可以换的，仅仅把ace/theme/monokai用下面的换掉即可

Eclipse -> ace/theme/eclipse
GitHub -> ace/theme/github
TextMate -> ace/theme/textmate
and 
ambiance, dawn, chaos, chrome, dreamweaver, xcode, vibrant_ink, solarized_dark, solarized_light, tomorrow, tomorrow_night, tomorrow_night_blue, 
twilight, tomorrow_night_eighties, pastel_on_dark and many more..

如果你想用 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>

还有一个比较好玩的，是一个在编辑过程中会变色的，大家可以试试：

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;">