有意思，一行代码浏览器变编辑器(HTML5)

最新推荐文章于 2022-05-28 19:42:11 发布

转载最新推荐文章于 2022-05-28 19:42:11 发布 · 184 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/pandao/blog/106396

文章标签：

#python #ruby #javascript #ViewUI

本文介绍了一种利用HTML5特性将浏览器转变为支持多种编程语言语法高亮的临时编辑器的方法，并提供了Python和Ruby编辑器的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

只要浏览器能支持HTML5，就可以在浏览器地址栏中输入一行代码：data:text/html, <html contenteditable> ，回车即可把浏览器变临时编辑器。

于是有人加强了一下，支持PHP、Python、Javascript、Java、C/C++和Ruby的语法高亮：

https://gist.github.com/4666256

PS：想做一个演示链接，可是Kindeditor不能插入这样的链接，只好放到自己的网站了。

演示地址： http://www.ipandao.com/browser-editor.html

兼容情况：

测试了一下，目前只有Chrome、Opera 12及国产双核浏览器高速模式下支持，IE系、火狐17都不行。

PHP编辑器：

Python编辑器：

Javascript：

示例代码：

<a href="data:text/html, &lt;style type=%22text/css%22&gt;#e{position:absolute;top:0;right:0;bottom:0;left:0;}&lt;/style&gt;&lt;div id=%22e%22&gt;&lt;/div&gt;&lt;script src=%22http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js%22 type=%22text/javascript%22 charset=%22utf-8%22&gt;&lt;/script&gt;&lt;script&gt;var e=ace.edit(%22e%22);e.setTheme(%22ace/theme/monokai%22);e.getSession().setMode(%22ace/mode/python%22);&lt;/script&gt;">打开Python编辑器</a> 

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

相关文章阅读：
一行代码，浏览器变临时编辑器： http://blog.jobbole.com/32823/

转载于:https://my.oschina.net/pandao/blog/106396