在大部分人眼里，技术宅给人的印象是沉默寡言，总摸不透他心里想些什么，彼此都保持距离。作为半个程序员，我觉得真正的技术宅大部分时间都在找乐子，鼓捣各种想法，和大部分人的极客心理是一样的，程序员也还爱讲笑话，也喜欢烧菜做饭，虽然大多是为了减减压，这样看来和常人没什么不一样。

" 程序员 Jose Jesus Perez Aguinaga 在 CoderWall 分享了一个小技巧：在浏览器地址栏中输入一行代码：data:text/html, <html contenteditable> ，回车即可把浏览器变临时编辑器（需要浏览器支持 HTML5 属性 contenteditable）。不少程序员受 Jose 的启发，开始对这行代码加工改造，比如改成支持 Ruby 语法高亮的编辑器……"

为什么它能奏效？
这是用了数据URI的格式（Data URI’s format），并告诉浏览器渲染 HTML。不过 contenteditable是 HTML5 的一个属性，所以这个小技巧只能用于支持该属性的现代浏览器。（IE 8–就不行了 ）

有趣的内容还在下面
不少程序员受 Jose 的启发，开始对这行代码加工改造了。
● jakeonrails 童鞋改成了一个支持 Ruby 代码高亮的编辑器 https://gist.github.com/4666256

代码：

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>

● 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

● jdkanani 后来的补充：（2013-1-30 22:06:48 更新）

For all browser including firefox 18 :)

https://gist.github.com/4670615

改造成支持其他语言语法高亮的，可把 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
等等....

不想复制粘贴代码的懒汉童鞋，可以直接戳下面这些链接：

Ruby 编辑器 、Python 编辑器、PHP 编辑器 、Javascript 编辑器 、Java 编辑器 、C/C++ 编辑器 （也可把这些链接作为浏览器书签收藏哦。）

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

data:text/html, <textarea style="font-size: 1.5em; width: 100%; height: 100%; border: none; outline: none" autofocus />

或直接戳 链接。

● bgrins 的改造：编辑内容时，自动变换背景颜色；停止后变换白色。

data:text/html, <html><head><link 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: all linear 1s; }</style><script>window.οnlοad=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=null;document.οnkeydοwn=function(){t=Math.min(128,t+2);e=true;clearTimeout(n);n=setTimeout(function(){e=false},1500)}}</script></head><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">

● fvsch 的改造：

data:text/html, <body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">

或直接戳 链接。

这些个奇淫技巧就到此为止吧。

1:进入主题1编辑器                 2:进入主题2编辑器                 3:进入主题3编辑器                     4:进入画图

google chrome浏览器，真是一个非常让人喜爱的工具（我把他当工具了，让我提高效率），值得我们研究。

<参考：https://gist.github.com/jakeonrails/4666256 & http://www.36kr.com/p/201096.html & http://blog.jobbole.com/32823/>

转载于:https://www.cnblogs.com/ChandlerVer5/p/notepad_google.html

让chrome浏览器变成在线编辑器相关推荐

  1. chrome 浏览器在线翻译插件

    介绍几款Chrome浏览器的在线鼠标取词和句子翻译的插件 一.bubble-translate (支持单词.句子翻译) 下载地址:http://code.google.com/p/bubble-tra ...

  2. html word编辑器插件,2017年chrome插件推荐八期：可以在浏览器中在线编辑office文件的扩展程序汇总...

    开通网上MS Office文件使用Office Web Apps的浏览器.支持DOC , PPT和XLS文件. 打开使用微软的Office Web Apps的浏览器的在线Office文件.支持在线的W ...

  3. 保护程序猿滴眼睛-----修改VS 2008 编辑器颜色 (修改 chrome浏览器的背景色)

    前几天更改了 chrome 的背景色后,虽然有些地方看起来不和谐,想百度的首页,显示出了大快的图片区域,但是,整体感觉这个颜色设置真的对眼睛有一定保护作用... 所以,再顺便修改一下 经常用的 vs2 ...

  4. 20个最强的基于浏览器的在线代码编辑器 - OPEN资讯

    20个最强的基于浏览器的在线代码编辑器 - OPEN资讯 20个最强的基于浏览器的在线代码编辑器

  5. 在线html 浏览器,25个基于浏览器的HTML在线编辑器集合

    本篇只是整理,排名不分先后,请大家按需使用. 新浪编辑器SinaEditor 应该算是最贴近网友体验的编辑器,简洁.大方,并且使用方便.功能强大. JAte 是一款精致小巧的文本编辑器,目的为提供高用 ...

  6. 25个基于浏览器的HTML在线编辑器集合

    新浪编辑器SinaEditor 应该算是最贴近网友体验的编辑器,简洁.大方,并且使用方便.功能强大. JAte 是一款精致小巧的文本编辑器,目的为提供高用户体验,主要基于as3平台.由于需要flash ...

  7. iPad Pro变生产力工具，你还缺这个轻量级浏览器端代码编辑器

    晓查 发自 凹非寺  量子位 报道 | 公众号 QbitAI 注意,这篇文章就是在劝你买iPad Pro(手动狗头)~ 最近,苹果推出了新的iPad Pro,号称生产力工具. 然而对程序员来说,不能写 ...

  8. 让浏览器变身代码编辑器

    http://mp.weixin.qq.com/s?__biz=MzAwNDc0MTUxMw==&mid=401904539&idx=1&sn=efb4ca8b181489bc ...

  9. vs代码补全的快捷键_iPad Pro变生产力工具，你还缺个轻量级浏览器端代码编辑器...

    晓查 发自 凹非寺 量子位 报道 | 公众号 QbitAI 最近,苹果推出了新的iPad Pro,号称生产力工具. 然而对程序员来说,不能写代码,就难以称得上生产力. 虽然也有一些优秀的写代码App可 ...

最新文章

  1. 走过2010，期盼2011！
  2. 奇异值分解SVD（证明全部省略）
  3. 《国境的南边》观后感
  4. 在Windows中安装NodeJS的正确方法
  5. libevent源码深度剖析二
  6. matlab mcc-m,【matlab】matlab中 mcc、mbuild和mex命令详解
  7. 大数据风控必看，挖掘学历数据中暗藏的还款意愿及还款能力
  8. five笔记1:ppt软件和文件打不开
  9. 使用itextpdf生成pdf
  10. 3dmax：3dmax三维VR渲染设置(VR发光贴图、VR灯光缓存、V-Ray焦散，渲染图中出现黑斑点的原因、插值类型)之详细攻略
  11. 入侵oracle数据库时常用的操作命令整理
  12. 软件设计之“信雅达”
  13. 计算机网络学习——王道教材书（持续更新）
  14. 对于一颗给定的二叉树，输出所有从根节点到叶节点的路径
  15. 王者荣耀背景html,王者荣耀镜背景故事是什么？王者荣耀镜背景故事分享
  16. matlab中elevation函数功能,Matlab的Demcmap的Python等价物（elevation+/appropriate colormap）...
  17. 优酷投屏显示无法找到服务器,优酷投屏突然不能用了（优酷版权限制无法投屏）...
  18. 社会化分享功能的实现
  19. 2021年T电梯修理最新解析及T电梯修理模拟考试题
  20. CAD怎么在线转换图纸呢？

热门文章

  1. 增速减缓、毛利率降至新低 丁磊“再造网易”要缓缓了
  2. 罗庄高新区电子计算机学校,厉害了！临沂这101所中小学要出名了！罗庄这些学校上榜（附全名单）...
  3. Value Use User
  4. 家里摄像头密码忘记找回
  5. 西北乱跑娃 -- mysql常用操作命令
  6. 最常见的运放LM358简要功能介绍（抄原理图）
  7. 康耐视visionpro快速入门笔记1
  8. 一个帮助选择困难症的小程序
  9. 【苹果家庭iMessage推送】Aupperpushslcertificate或ProductPushsCertificate证书不可以过期
  10. 【苹果推iMessage】软件安装命令打开工程： open ios/AwesomeProject.xcodeproj