谷歌html编辑器代码,一行代码让谷歌浏览器变成在线编辑器
这个比较好玩,或许有时能用上。
只需在浏览器地址栏里输入一行代码:
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编辑器代码,一行代码让谷歌浏览器变成在线编辑器相关推荐
- html %3c自动转化,一行代码让谷歌浏览器变成在线编辑器(示例代码)
这个比较好玩,或许有时能用上. 只需在浏览器地址栏里输入一行代码: data:text/html, 为什么它能奏效? 这是用了数据URI的格式(Data URI's format),并告诉浏览器渲染 ...
- html5在线编辑器 h,前端最好用的HTML在线编辑器是哪一款
<前端最好用的HTML在线编辑器是哪一款>要点: 本文介绍了前端最好用的HTML在线编辑器是哪一款,希望对您有用.如果有疑问,可以联系我们. 开发网站,一定会碰到HTML在线编辑器,我们详 ...
- html sql 编辑器,【web】CodeMirror打造SQL在线编辑器
前提 开始之前我们上首先看一下codemirror包结构,我们Demo接下来要使用的所有文件都在该包之中. 一.初始化编辑器 1)引入codemirror js库和css文件,本文为了方便使用的是cd ...
- linux 一行代码,一行代码终结你的Linux~
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 分类: 代码: :() { :|:& }; : 为什么这个东西会让你的系统死掉???有人执行了然后问我 让我们来分析一下这段代码,我改一下格式,但 ...
- sqlparameter多个赋值一行完成_HashMap源码从面试题说起:请一行一行代码描述hashmap put方法...
前言 前阵子(估计也快半年了吧)遇到这么一个面试题:请一行代码一行代码描述下HashMap put方法. 我:... 哈哈,其实也没有无语,当时知道HashMap的原理,数据结构,以及一些要注意的点, ...
- 一行代码实现python调用迅雷下载文件 悄悄的帮你下载你想要的
一行代码实现python调用迅雷下载文件 前言 解决思路 代码 前言 这几天发现有有一些网站把他们资源的迅雷链接直接亮出来,总是被反爬技术伤害的我心中突然一喜,我用迅雷下载不碍你事了吧,话不多说,开整 ...
- 前端代码在线编辑器:codepen、codesandbox
文章目录 单文件在线编辑器 项目级在线编辑器 推荐两个前端代码在线编辑器 单文件在线编辑器:https://codepen.io/pen/ 项目级在线编辑器:https://codesandbox.i ...
- tinyMce在线编辑器内JavaScript实现按Ctrl+S无刷新保存
以前也用过几个编辑器拉,如FCK,CUTEDTOR等,它们大都实现了很不错了的功能,也有丰富的插件使用.不过我还是觉得TinyMCE在线编辑器好用,它是采用纯JS客户端脚本技术构建,是一个轻量级加载速 ...
- php导航代码在线编辑器,只需一行代码,轻松实现一个在线编辑器
在大部分人眼里,技术宅给人的印象是沉默寡言,总摸不透他心里想些什么,彼此都保持距离.作为半个程序员,我觉得真正的技术宅大部分时间都在找乐子,鼓捣各种想法,和大部分人的极客心理是一样的,程序员也还爱讲笑 ...
- M1芯片成功运行Linux,终端一行代码启动安装,也能一键删除卸载
丰色 发自 凹非寺 量子位 | 公众号 QbitAI 终于,M1系列的Mac可以启动Linux-macOS双系统了! △ Asahi Linux官方供图 Asahi Linux在官方推特上宣布 ...
最新文章
- recv java_用于TCP套接字编程的Recv函数
- iOS常用第三方开源框架和优秀开发者博客等
- 辗转相除法的程序实现
- blob html 预览_iframe和HTML5 blob实现JS,CSS,HTML直接当前页预览
- one thread one loop
- 调用向量的第i维分量| 使用Python的线性代数
- flume linux 命令,flume启动命令 · Mr.Deng’s Blog
- 【BZOJ3196】【Tyvj1730】二逼平衡树,第一次的树套树(线段树+splay)
- linux中python进程,如何检查进程在python中运行(在linux中)?
- 模块化(1):基本思路
- MFC更改环境目录可执行文件目录下继承的值
- 使用eclipse搭建maven项目Java web项目
- Linux C编程与Shell编程在开发实用工具方面的相同点总结
- 英语学习框架(一) 英语音标
- ubuntu硬盘序列号怎么查询_Ubuntu16.04中查看硬盘的型号和读取速度
- 如何使用rclone从AWS S3迁移到IBM COS - part 2 - 同步腾讯云对象存储
- [圣诞大礼]Macintosh苹果机精品游戏合集
- eclipse注释出现问号
- C++string用法
- 股民学堂:短线炒股绝招 值得一学