浏览器k，浏览器怎么使用

大家好，我是EarlGrey，是《Python编程无师自通》、《Python并行计算手册》等技术书籍的翻译者和出版者，注重分享有用的信息。如果我的分享对您有帮助，请关注我，一起前进。

浏览器不就是用来浏览网页、观看在线视频的吗？我还可以在浏览器中编码吗？

那是对的！你真的可以。目前已经有很多在线代码编辑的网站，例如JSFiddle 和JSBin。然而，我们今天向您展示的方法并不要求您注册第三方网站。只需在浏览器的地址栏中输入一行代码即可。首先我们来看看具体的效果。

编辑器中的Python 代码

在上图中，您可以看到您可以在浏览器中输入Python代码，并且它支持语法高亮和自动缩进。那么这是如何实现的呢？

这其实可以追溯到2012 年一位名叫Jose Aguinaga 的国外开发者在Coderwall 上分享的一个技巧。

将您的浏览器变成一个简单的文本编辑器

最初，它非常简单：它只是将您的浏览器变成文本编辑器，没有语法突出显示或自动缩进。

这是Jose 分享的代码：

data:text/html，html内容可编辑

只需将上述代码复制并粘贴到浏览器的地址栏中，然后按Enter 键即可将浏览器变成编辑器。是不是很简单呢？

其背后的原理并不深奥，只是使用了data URI 格式。这行代码告诉浏览器渲染一个HTML 页面，该页面具有H5 属性contenteditable。

Data URI 是RFC 2397 中定义的一种方案，用于将小文件直接嵌入到文档中。格式为：data:[][;charset=][;base64],实际上，整个语句可以看成三部分： 语句：参数+数据，逗号左边是各种参数，右边是数据。

如果您想尝试一下，请注意，这行代码仅适用于Chrome 等现代浏览器。如果您使用的是较旧的浏览器（例如IE8），则它不会产生任何影响。

提供各种衍生版本

上述小技巧的出现促使许多开发者分享自己的版本。

1

自动切换背景颜色

以下代码允许您在键入时立即切换编辑器中的背景颜色。

data:text/html, htmlheadlink 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: 全线性1; }stylescriptwindow.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)}}scriptheadbody contenteditable style='font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;'2

笔记本风格

下面的代码可以将你的浏览器页面变成笔记本风格。这很有趣。

data:text/html;charset=utf-8, titleTextEditortitle link rel='快捷图标' href='http://g.etfv.co/https://docs.google.com'/style html{height:100%;} body{background: -webkit-linear-gradient (#f0f0f0, #fff); 填充：3%; 高度：94%;} .paper { font: 正常12px/1.5 'Lucida Grande', 航空， 无衬线； 宽度：50%; 高度：80%; 边距： 0 自动； 填充： 6px 5px 4px 42px；位置：相对；颜色：#444；行高：20px；边框： 1px实心#d2d2d2；背景：#fff；背景： -webkit-gradient(线性，0 0, 0 100%，来自(#d9eaf3) ), color-stop(4%, # fff)) 0 4px;background: -webkit-线性渐变(顶部， #d9eaf3 0%, #fff 8%) 0 4px;background: -moz-线性渐变( 顶部， # d9eaf3 0%, #fff 8%) 0 4px;背景： -ms-线性渐变(顶部， #d9eaf3 0%, #fff 8%) 0 4px;背景： -o-线性渐变(顶部， #d9eaf3 0%, #fff 8%) 0 4px;background: 线性-渐变(顶部， #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; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; -webkit-box-shadow: 0 1px 2px rgba( -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: 绝对； width:4px; top:0; left:3 0像素；bottom:0; border: 1px 实心； bordercolor: 透明#efe4e4; } textarea{display: 块； width:94%; margin:0 自动； 填充3 33603.8% 3%; border: 无； 轮廓： 无； height:94%; background: 透明； 行高3 3 36020px;} 样式主体Spellcheck='false' p class='paper' textarea autofocus='autofocus' textarea p body html 笔记本风格浏览器编辑器

我怎样才能把自己变成一个Python编辑器？

现在让我们看看如何将浏览器变成Python 编辑器。只需在地址栏中输入以下代码：

data:text/html，样式类型='text/css'.e{position:absolute;top:0;right:0;bottom:0;left:0;}stylep class='e'id='editor'pscript src='http://d1n0x3qji82z53.cloudfront.net/src-min -noconflict/ace.js' type='text/javascript' charset='utf-8'scriptscriptvar e=ace.edit('editor');e.setTheme('ace/theme/textmate');e.getSession( ).setMode('ace/mode/python');脚本

此代码由jdkanani 在Github 上共享。

事实上，只需修改上面的代码，您就可以立即将浏览器变成其他语言的编辑器，包括Markdown、C/C++、Javascript、Java 和几乎任何编程语言。只需将代码中的ace/mode/python 更改为ace/mode/对应的语言（如java）即可。

除了多语言支持之外，您还可以更改页面主题！ Eclipse、Github、Textmate 等经典主题均受支持。

只需将ace/theme/textmate 中的textmate 替换为您最喜欢的主题，例如monokai。

渲染Markdown 文本

如果您习惯使用Markdown 语法编写，您可能希望直接在页面上查看渲染效果。只需键入以下代码行。

data:text/html，样式类型='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 % ;}stylep 类='e ' id='editor'pp class='c'pscript src='http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js' type='text/javascript' charset='utf-8'scriptscript src=' http://cdnjs .cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js'脚本函数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 代码

背后的原理

看完这些例子，你可能已经明白了。所有这些示例都使用数据URI 格式来使浏览器呈现HTML 代码。编辑器相关的样式已经用代码编写了。这与在单独的文件中打开相应的HTML 代码具有相同的效果。

在前两个示例中，代码中实际上使用了一个名为ace.js 的文件。据小编了解，Ace是一款用JavaScript编写的嵌入式代码编辑器，功能和性能与Sublime、Vim、TextMate等原生编辑器相当。此外，它可以轻松嵌入到网页和JavaScript 应用程序中。

Ace 也是名为Cloud9IDE 的在线集成开发环境中使用的主要编辑器。具体效果请看下图。

Cloud9IDE编辑器的效果

细长的文字

程序员是一个善变的品种。一些开发人员仍然不满意上述手动输入代码将浏览器变成编辑器的方法，或者直接移动实际的编辑器并在浏览器中运行它。这是我要介绍的最后一篇SlimText，下面是具体的截图。

细长文字截图

如屏幕截图所示，SlimText 作为Chrome 插件存在，是一个实际的浏览器端代码编辑器，具有文件结构、文件搜索和文件保存等功能。它是由一个叫tylerlong的中国人开发的，支持Windows、Linux、Mac OS X等多种平台。

-EOF-

如果您阅读了本文，请不要忘记点击右下角的“喜欢”和“阅读”来给予鼓励。

点击标题即可跳转

如果您回复关键字“pybook03”，您将收到Attack on Gray及其朋友翻译的电子版《Think Python 2e》。

如果回复关键词“书单02”，您将收到Attack Gray整理的10本Python入门书籍电子版。

请告诉我更多细节

查看我的朋友圈，每天更新您的想法和见解。