一行代码,浏览器变临时编辑器

2013-6-6 liyangweb.com 李杨 Web周边

    在浏览器地址栏中输入下面这行代码,回车即可把浏览器变临时编辑器。

data:text/html, <html contenteditable>

    你以为这就很神奇了吗?那你就错了,神奇的还在后面~~~    

这是用了数据URI的格式(Data URI’s format),并告诉浏览器渲染 HTML。不过 contenteditable 是 HTML5 的一个新全局属性,所以这个小技巧只能用于支持该属性的现代浏览器,较高版本的火狐、谷歌等,IE 8以下就不行了

Ruby 代码编辑器

data:text/html, <style type="text/css">#e{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div id="e"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("e");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/ruby");</script>

改造成支持其他语言语法高亮的,可把 ace/mode/ruby 替换为:

Python -> ace/mode/python

Markdown -> ace/mode/php
C/C++ -> ace/mode/c_cpp
Javscript -> ace/mode/javascript
Java -> ace/mode/java
Scala -> ace/mode/scala
Markdown -> ace/mode/markdown

如果需要换成其他风格,,可把 ace/theme/monokai 替换为:

Eclipse -> ace/theme/eclipse

TextMate -> ace/theme/textmate


    什么?懒得动手?!好吧,你可以点下面的链接直接进入编辑器了。如果你是用的IE8及以下浏览器的话,我只能无助的望望你这位远古的人类了~~~

Ruby 编辑器 Python 编辑器PHP 编辑器 、Javascript 编辑器 、Java 编辑器 、C/C++ 编辑器 

标签: 浏览器变编辑器

发表评论:

Powered by emlog 冀ICP备13011830号-1