浏览器--编辑器

最新推荐文章于 2023-02-01 09:41:03 发布

weixin_33991727

最新推荐文章于 2023-02-01 09:41:03 发布

阅读量107

点赞数

文章标签： markdown ruby json

原文链接：http://www.cnblogs.com/centvinzz/p/4278350.html

版权

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

weixin_33991727

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浏览器--编辑器

browser-notepad浏览器编辑器仅适用于支持HTML5内容可编辑属性的浏览器使用方法打开浏览器，然后将下面的代码输入进地址栏即可。最简单朴素的浏览器-编辑器：浏览器地址栏输入以下内容：data:text/html, <html contenteditable>支持各种编程语言的编辑器浏览器地址栏输入以下内容：data:text/html...
复制链接

扫一扫