html 编辑器 es6,小技巧:一行代码让浏览器瞬间变成临时编辑器
这是 Jose 在CoderWall 分享的一个小技巧:在浏览器地址栏中输入下面这行代码,回车即可把浏览器变临时编辑器。data:text/html,
为什么它能奏效?
这是用了数据URI的格式(Data URI’s format),并告诉浏览器渲染 HTML。不过 contenteditable 是 HTML5 的一个新全局属性,所以这个小技巧只能用于支持该属性的现代浏览器。IE 8 就不行了:
并非只能纯文字,也可粘贴图片。赶紧复制粘贴那行代码,然后回车,来试试呗。
有趣的内容还在下面
不少程序员受 Jose 的启发,开始对这行代码加工改造了。
● jakeonrails 童鞋改成了一个支持Ruby 代码高亮的编辑器 https://gist.github.com/4666256
代码:
data:text/html,
var e=ace.edit("e");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/ruby");
slawdan 提示说:如果把上面的 ace/mode/ruby 改成ace/mode/python,那么就得到了一个 Python 版的编辑器咯。其他语言依此类推。
改造成支持其他语言语法高亮的,可把 ace/mode/ruby 替换为:
PHP -> ace/mode/php
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
其他……
jakeonrails 语法高亮风格用的是 monokai。
如果需要换成其他风格,,可把 ace/theme/monokai 替换为:
Eclipse -> ace/theme/eclipse
TextMate -> ace/theme/textmate
其他……
PHP编辑器演示效果:
montas 的改造:You can use textarea and make it “invisible” if you want autofocus.
data:text/html,
bgrins 的改造:编辑内容时,自动变换背景颜色;停止后变换白色。
data:text/html,
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)}}
fvsch 的改造:
data:text/html,
原文:http://nonfu.me/p/11161.html
html 编辑器 es6,小技巧:一行代码让浏览器瞬间变成临时编辑器相关推荐
- CSDN-Markdown编辑器使用小技巧
Markdown编辑器使用小技巧 1.图片无法显示 1.图片无法显示 1.检查图片的命名格式是否正确,数字不能作为图片名称开头,虽然window操作系统下能够识别,但是导入图片的时候会造成无法显示的错 ...
- 【RISC-V】嵌入式开发小技巧之代码字体缩放!
嵌入式开发小技巧之代码字体缩放!(RISC-V IDE MRS) MRS 下载地址:www.mounriver.com 字体放大:快捷键"Ctrl +" 效果: 字体缩小:快捷键& ...
- 【Unity知识树】Unity编辑器加速小技巧
Unity编辑器加速小技巧 运行游戏时不重新编译脚本 现象:每次运行游戏都会弹出一个重新加载脚本的框,耽误几秒钟时间. 提速技巧:勾选工程设置 > 编辑器 > Enter Play Mod ...
- ES6数组去重(一行代码实现数组去重)
1.ES6中新增了Set数据结构,类似于数组,但是 它的成员都是唯一的 ,其构造函数可以接受一个数组作为参数,如: let array = [1, 1, 1, 1, 2, 3, 4, 4, 5, 3] ...
- vscode编辑器搜索小技巧
`vscode`是大家常用的编辑器,这里分享一些常用的搜索技巧,希望可以帮助大家加速代码查找和开发进度. 一. 搜索目录下的指定文件 如果想要搜索某个文件目录下的指定文件,该如何配置呢? 例如想搜索H ...
- Markdown小技巧:代码格式、缩进和字体大小
代码格式 可以用<pre name="code" class="java"></pre>包裹住代码块,例如: <pre name= ...
- Windows8程序开发小技巧---在代码中使用Segoe UI Symbol图标字体及常用图标列表
在windows商店应用程序开发中经常会Segoe UI Symbol图标符号,在xaml中使用很简单,如下边的代码 <StackPanel Grid.Column="2" ...
- #WordPress小技巧#纯代码为自己博客添加支付宝/微信打赏功能
原文:https://www.wn789.com/13323.html 很多人的WordPress博客在文章尾部都有打赏功能,让读者可以直接通过扫描微信.支付宝二维码进行赞助,毕竟维护博客,编写博文需 ...
- linux 使cpu使用率升高_[Linux小技巧] 一行命令让CPU占用率达到100%
Java关键字--transient 当使用Serializable接口实现序列化操作时,如果一个对象中的某一属性不希望被序列化,则可以使用transient关键字进行声明 import java.i ...
最新文章
- w10系统老是自动息屏_大师解答win10系统无法自动关屏/待机和睡眠的恢复教程
- UITextView实现图文混排效果
- OpenGL 3D 选择
- win7计算机中丢失mfc120,mfc120.dll 64位
- hdu 1086 A - You can Solve a Geometry Problem too (线段的规范相交非规范相交)
- C++匿名管道详解及简单案例(基于VS2013)
- python scrapy爬虫遇见301_python Scrapy框架 报301
- python编程(改进的线程同步方式)
- oracle shutdown 默认,oracle shutdown 没有反应
- python里怎么读取文件-python之文件读写
- abaqus python 读取文件_通过Python脚本从Abaqus中的excel文件导入幅度数据
- vs2019专业版本 vtk安装
- RN通信底层原理 -- 总结篇
- macOS High Sierra 10.13
- 【Java 数据结构】Map和Set
- linux服务器---代理认证
- 安装Dev c++后,编译文件出现未编译的解决方法
- 计算机设备名称英语词汇
- multisim仿真 74LS147D芯片
- 刷脸支付享受便捷的同时兼顾安全
热门文章
- SAP Spartacus 里的 cxOutletRef 指令执行过程分析
- SAP Spartacus如何为不同的environment设置不同的baseUrl
- SAP Spartacus配置后台Commerce Cloud的位置
- 使用Source Monitor检测Java代码的环复杂度
- 一个最简单的SAP UI5应用部署到SAP云平台CloudFoundry环境后,自动生成了哪些资源
- 140行代码实现一个逼真的大雪纷飞的效果
- SAP CRM Fiori应用Simulation pipeline里dualSlider的实现
- could not find any translatable text for key 'Search' in bundle '/cus.crm.notes/
- this.byId(SupplierForm).bindElement in SAP UI5
- VError - Found 0 matching services的根源分析