博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
浏览器--编辑器
阅读量:6803 次
发布时间:2019-06-26

本文共 2285 字,大约阅读时间需要 7 分钟。

browser-notepad

浏览器编辑器

仅适用于支持HTML5内容可编辑属性的浏览器

使用方法

打开浏览器,然后将下面的代码输入进地址栏即可。

最简单朴素的浏览器-编辑器:

浏览器地址栏输入以下内容:

data:text/html, <html contenteditable>

支持各种编程语言的编辑器

浏览器地址栏输入以下内容:

data:text/html, <style type="text/css">.e{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div class="e" id="editor"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("editor");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/ruby");</script>

更多语言的支持: 将 ace/mode/ruby用以下语言替换:

Markdown -> ace/mode/markdown

Python -> ace/mode/python

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

Javscript -> ace/mode/javascript

Java -> ace/mode/java

Scala- -> ace/mode/scala

CoffeeScript -> ace/mode/coffee

and 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 and many more...

想换个主题

ace/theme/monokai用下面的替换掉:

Eclipse -> ace/theme/eclipse

GitHub -> ace/theme/github

TextMate -> ace/theme/textmate

and ambiance, dawn, chaos, chrome, dreamweaver, xcode, vibrant_ink, solarized_dark, solarized_light, tomorrow, tomorrow_night, tomorrow_night_blue, twilight, tomorrow_night_eighties, pastel_on_dark and many more..

##想在浏览器编辑Markdown

data:text/html,<style type="text/css">.e{position:absolute;top:0;right:50%;bottom:0;left:0;} .c{position:absolute;overflow:auto;top:0;right:0;bottom:0;left:50%;}</style><div class="e" id="editor"></div><div class="c"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script><script> function showResult(e){consoleEl.innerHTML=e}var e=ace.edit("editor");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/markdown");var consoleEl=document.getElementsByClassName("c")[0];var converter=new Showdown.converter;e.commands.addCommand({name:"markdown",bindKey:{win:"Ctrl-M",mac:"Command-M"},exec:function(t){var n=e.getSession().getMode().$id;if(n=="ace/mode/markdown"){showResult(converter.makeHtml(t.getValue()))}},readOnly:true})</script>

转载于:https://www.cnblogs.com/centvinzz/p/4278350.html

你可能感兴趣的文章
微软私有云分享(R2)21 BMC提升B格
查看>>
MDSF:如何使用GMF来做TOGAF建模工具
查看>>
Spring Security简介
查看>>
打造一流的研发中心
查看>>
MCollective架构篇3-Puppet插件的部署及测试
查看>>
配置GNS使用CRT连接
查看>>
Java:集合类性能分析
查看>>
创建Server 2012 VHDX虚拟磁盘模板
查看>>
IE调试网页之五:使用 F12 开发人员工具调试 JavaScript 错误 (Windows)
查看>>
JavaScript词法作用域与调用对象
查看>>
各个JAVA场景下的内存图
查看>>
【干货】程序员常访问的国外技术交流网站汇总
查看>>
linux watchdog demo hacking
查看>>
日志分析系统——Hangout源码学习
查看>>
5.9. sort - sort lines of text files
查看>>
cms无法登陆
查看>>
JavaScript中事件处理
查看>>
VSTO 向office文档中插入内容
查看>>
【百度地图API】关于如何进行城市切换的三种方式
查看>>
How to provide highlighting with Spring data elasticsearch
查看>>