这个比较好玩,或许有时能用上。

只需在浏览器地址栏里输入一行代码:

data:text/html,

为什么它能奏效?

这是用了数据URI的格式(Data URI’s format),并告诉浏览器渲染 HTML。不过 contenteditable是 HTML5 的一个属性,所以这个小技巧只能用于支持该属性的现代浏览器。(IE 8–就不行了 )

有趣的内容还在下面

不少程序员受 Jose 的启发,开始对这行代码加工改造了。

● jakeonrails 童鞋改成了一个支持Ruby 代码高亮的编辑器https://gist.github.com/4666256

代码:

data:text/html,

● slawdan 提示说:如果把上面的 ace/mode/ruby 改成ace/mode/python,那么就得到了一个 Python 版的编辑器咯。其他语言依此类推。

● lashkari提示说:If you URL encode the HTML, it should work in both Firefox and Chrome:

data:text/html, %3Cstyle%20type%3D%22text%2Fcss%22%3E%23e%7Bposition%3Aabsolute%3Btop%3A0%3Bright%3A0%3Bbottom%3A0%3Bleft%3A0%3B%7D%3C%2Fstyle%3E%3Cdiv%20id%3D%22e%22%3E%3C%2Fdiv%3E%3Cscript%20src%3D%22http%3A%2F%2Fd1n0x3qji82z53.cloudfront.net%2Fsrc-min-noconflict%2Face.js%22%20type%3D%22text%2Fjavascript%22%20charset%3D%22utf-8%22%3E%3C%2Fscript%3E%3Cscript%3Evar%20e%3Dace.edit(%22e%22)%3Be.setTheme(%22ace%2Ftheme%2Fmonokai%22)%3Be.getSession().setMode(%22ace%2Fmode%2Fruby%22)%3B%3C%2Fscript%3E

For all browser including firefox 18 :)

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

Python -> ace/mode/python

C/C++ -> ace/mode/c_cpp

Javscript -> ace/mode/javascript

Java -> ace/mode/java

Scala -> ace/mode/scala

Markdown -> ace/mode/markdown

CoffeeScript -> ace/mode/coffee

或者其他语法高亮: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 等等…

jakeonrails 语法高亮风格用的是 monokai。

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

Eclipse -> ace/theme/eclipse

TextMate -> ace/theme/textmate

这些主题:xcode, vibrant_ink, solarized_dark, solarized_light, tomorrow, tomorrow_night, tomorrow_night_blue, twilight, tomorrow_night_eighties, pastel_on_dark

等等....

● montas 的改造:You can use textarea and make it “invisible” if you want autofocus.

data:text/html,

● bgrins 的改造:编辑内容时,自动变换背景颜色;停止后变换白色。

data:text/html,

● fvsch 的改造:

data:text/html,

原文:http://www.cnblogs.com/8988-miaoxiaohua/p/7718708.html

谷歌html编辑器代码,一行代码让谷歌浏览器变成在线编辑器相关推荐

  1. html %3c自动转化,一行代码让谷歌浏览器变成在线编辑器(示例代码)

    这个比较好玩,或许有时能用上. 只需在浏览器地址栏里输入一行代码: data:text/html, 为什么它能奏效? 这是用了数据URI的格式(Data URI's format),并告诉浏览器渲染 ...

  2. html5在线编辑器 h,前端最好用的HTML在线编辑器是哪一款

    <前端最好用的HTML在线编辑器是哪一款>要点: 本文介绍了前端最好用的HTML在线编辑器是哪一款,希望对您有用.如果有疑问,可以联系我们. 开发网站,一定会碰到HTML在线编辑器,我们详 ...

  3. html sql 编辑器,【web】CodeMirror打造SQL在线编辑器

    前提 开始之前我们上首先看一下codemirror包结构,我们Demo接下来要使用的所有文件都在该包之中. 一.初始化编辑器 1)引入codemirror js库和css文件,本文为了方便使用的是cd ...

  4. linux 一行代码,一行代码终结你的Linux~

    该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 分类: 代码: :() { :|:& }; : 为什么这个东西会让你的系统死掉???有人执行了然后问我 让我们来分析一下这段代码,我改一下格式,但 ...

  5. sqlparameter多个赋值一行完成_HashMap源码从面试题说起:请一行一行代码描述hashmap put方法...

    前言 前阵子(估计也快半年了吧)遇到这么一个面试题:请一行代码一行代码描述下HashMap put方法. 我:... 哈哈,其实也没有无语,当时知道HashMap的原理,数据结构,以及一些要注意的点, ...

  6. 一行代码实现python调用迅雷下载文件 悄悄的帮你下载你想要的

    一行代码实现python调用迅雷下载文件 前言 解决思路 代码 前言 这几天发现有有一些网站把他们资源的迅雷链接直接亮出来,总是被反爬技术伤害的我心中突然一喜,我用迅雷下载不碍你事了吧,话不多说,开整 ...

  7. 前端代码在线编辑器:codepen、codesandbox

    文章目录 单文件在线编辑器 项目级在线编辑器 推荐两个前端代码在线编辑器 单文件在线编辑器:https://codepen.io/pen/ 项目级在线编辑器:https://codesandbox.i ...

  8. tinyMce在线编辑器内JavaScript实现按Ctrl+S无刷新保存

    以前也用过几个编辑器拉,如FCK,CUTEDTOR等,它们大都实现了很不错了的功能,也有丰富的插件使用.不过我还是觉得TinyMCE在线编辑器好用,它是采用纯JS客户端脚本技术构建,是一个轻量级加载速 ...

  9. php导航代码在线编辑器,只需一行代码,轻松实现一个在线编辑器

    在大部分人眼里,技术宅给人的印象是沉默寡言,总摸不透他心里想些什么,彼此都保持距离.作为半个程序员,我觉得真正的技术宅大部分时间都在找乐子,鼓捣各种想法,和大部分人的极客心理是一样的,程序员也还爱讲笑 ...

  10. M1芯片成功运行Linux,终端一行代码启动安装,也能一键删除卸载

    丰色 发自 凹非寺 量子位 | 公众号 QbitAI 终于,M1系列的Mac可以启动Linux-macOS双系统了!‍ ‍‍ △ Asahi Linux官方供图 Asahi Linux在官方推特上宣布 ...

最新文章

  1. recv java_用于TCP套接字编程的Recv函数
  2. iOS常用第三方开源框架和优秀开发者博客等
  3. 辗转相除法的程序实现
  4. blob html 预览_iframe和HTML5 blob实现JS,CSS,HTML直接当前页预览
  5. one thread one loop
  6. 调用向量的第i维分量| 使用Python的线性代数
  7. flume linux 命令,flume启动命令 · Mr.Deng’s Blog
  8. 【BZOJ3196】【Tyvj1730】二逼平衡树,第一次的树套树(线段树+splay)
  9. linux中python进程,如何检查进程在python中运行(在linux中)?
  10. 模块化(1):基本思路
  11. MFC更改环境目录可执行文件目录下继承的值
  12. 使用eclipse搭建maven项目Java web项目
  13. Linux C编程与Shell编程在开发实用工具方面的相同点总结
  14. 英语学习框架(一) 英语音标
  15. ubuntu硬盘序列号怎么查询_Ubuntu16.04中查看硬盘的型号和读取速度
  16. 如何使用rclone从AWS S3迁移到IBM COS - part 2 - 同步腾讯云对象存储
  17. [圣诞大礼]Macintosh苹果机精品游戏合集
  18. eclipse注释出现问号
  19. C++string用法
  20. 股民学堂:短线炒股绝招 值得一学

热门文章

  1. freeswitch 修改编码协商顺序 优先G729
  2. 戴尔R730服务器,U盘安装服务器阵列(raid)卡驱动,识别硬盘。
  3. 最全SSH命令 - 11种用法
  4. 带大家认识下Kvaser CAN总线协议
  5. lora网关采集温室大棚温湿度数据案例
  6. pscc2018教程photoshop软件全套入门到精通分享
  7. 如何设置路由器的中继模式-机器人局域网组网攻略
  8. 肯德尔系数怎么分析_北京师范大学心理学考研 专硕真题分析+考试大纲
  9. 常用的vue组件库总结
  10. 计算机视觉——图像检索与识别