Skip to content

Instantly share code, notes, and snippets.

@richardtape

richardtape/sausage

Created February 1, 2013 13:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save richardtape/4691262 to your computer and use it in GitHub Desktop.
Save richardtape/4691262 to your computer and use it in GitHub Desktop.
Download ZIP
Start of the world's simplest html/css editor, with syntax highlighting. Copy and paste this into your browser url box and hit enter. ToDo: Add a CSS box which then applies to the iframe below. ToDo: Remove the line numbers and spurious 'X' that appears in the iframe ToDo: ? ToDo: Profit.
Raw
sausage
data:text/html;charset=utf-8, <link rel="shortcut icon" href="http://g.etfv.co/https://docs.google.com"/><title>TextEditor</title> <link rel="shortcut icon" href="http://g.etfv.co/https://docs.google.com"/> <style> html{height: 100%;} body{background: -webkit-linear-gradient(#f0f0f0, #fff); padding: 3%; height: 94%;} .paper { font: normal 12px/1.5 "Lucida Grande", arial, sans-serif; width: 50%; height: 44%; margin: 0 auto; padding: 0; position: relative; color: #444; line-height: 20px; border: 1px solid #d2d2d2; background: #fff; background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px; background: -webkit-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -moz-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -ms-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -o-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; -webkit-background-size: 100% 20px; -moz-background-size: 100% 20px; -ms-background-size: 100% 20px; -o-background-size: 100% 20px; background-size: 100% 20px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.07); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.07); box-shadow: 0 1px 2px rgba(0,0,0,0.07); } .paper::before { content: ''; position: absolute; width: 4px; top: 0; left: 30px; bottom: 0; border: 1px solid; border-color: transparent #efe4e4; } pre{display: block; width:100%;margin:0;padding:4px 0 0; border: none; outline: none; height: 100%; background: transparent; line-height: 20px;} iframe { margin-top: 4%; width: 100%; height: 48%; border: none; } .ace-clouds .ace_gutter, .ace-clouds .ace_scroller, .ace-clouds .ace_gutter_active_line { background: transparent !important; } .ace_gutter .ace_layer { text-align: center !important; } .ace_gutter-cell { padding-left: 7px !important; } </style> <body spellcheck="false"> <div class="paper"> <pre id="editor" onkeyup="(function(d,t){d[t]('iframe')[0].contentDocument.body.innerHTML = d[t]('pre')[0].textContent;})(document,'getElementsByTagName')" autofocus="autofocus" contenteditable></pre> </div> <iframe></iframe> <script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script> <script> var editor = ace.edit("editor"); editor.setTheme("ace/theme/clouds"); editor.getSession().setMode("ace/mode/javascript"); </script> </body> </html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment