zoukankan      html  css  js  c++  java
  • 浏览器--编辑器

    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>

  • 相关阅读:
    ES6之6种遍历对象属性的方法
    css自定义滚动条样式,自定义文字选择样式,设置文字不被选择
    js img转换base64
    移动端rem造成的很多问题
    移动端边框1像素的问题
    【小练习1】如何制作“表单”
    2015-09-24 第六节课 (CSS补充和html 标签讲解、浏览器兼容性)
    2015-09-22 第四节课 CSS块级元素 行内元素 浮动 盒子模型 绝对定位、相当定位和固定定位
    2015-09-21 第三节课 css属性 border(边框)、background(背景)
    html你可能还不知道的一些知识点
  • 原文地址:https://www.cnblogs.com/centvinzz/p/4278350.html
Copyright © 2011-2022 走看看