Acelet

acelet.bookmarklet

javascript:(function(){
  function encodeString(string) {
    return encodeURIComponent(string
           .replace(/\\/g,"\\\\")
           .replace(/\"/g, '\\"')
           .replace(/\n\r?/g, '\\n')
           .replace(/%/g, 'U0025')
           .replace(/</g, '\\<')
           .replace(/>/g, '\\>')
           .replace(/script/ig, 'scr\"\+\"ipt')
    );
  }
  var aceletValue = encodeString(window.getSelection().toString());
  window.open('
data:text/html;charset=utf-8,
<title>Acelet</title>
<link rel="shortcut icon" href="http://g.etfv.co/http://www.sublimetext.com"/>
<style>
  body {margin: 0; background: #000;}
  #editor {font-size: 18px; width: 100%; height: 90%; height: -webkit-calc(100% - 40px); height: -moz-calc(100% - 40px); height: calc(100% - 40px); border: none; outline: none}
  button, #footer, #mode, .mode {border: none; background: none; padding: 0 10px; margin: 0; color: #ccc; font: 13px/20px Arial, sans-serif; text-align: center;}
  button:hover {cursor: pointer; color: #fff;}
  span.mode {float: right;}
  a, a:visited {text-decoration: none; color: crimson;}
  select {cursor: pointer;}
  option {color: black;}
</style>
<button onClick="saveToFile()">Save as...</button>
<span class="mode">Syntax: <select id="mode" onchange="changeMode(this)" size="1"><option value="abap">ABAP</option><option value="asciidoc">AsciiDoc</option><option value="c9search">C9Search</option><option value="coffee">CoffeeScript</option><option value="coldfusion">ColdFusion</option><option value="csharp">C#</option><option value="css">CSS</option><option value="curly">Curly</option><option value="dart">Dart</option><option value="diff">Diff</option><option value="dot">Dot</option><option value="glsl">Glsl</option><option value="golang">Go</option><option value="groovy">Groovy</option><option value="haxe">haXe</option><option value="haml">HAML</option><option value="html">HTML</option><option value="c_cpp">C/C++</option><option value="clojure">Clojure</option><option value="jade">Jade</option><option value="java">Java</option><option value="jsp">JSP</option><option value="javascript">JavaScript</option><option value="json">JSON</option><option value="jsx">JSX</option><option value="latex">LaTeX</option><option value="less">LESS</option><option value="lisp">Lisp</option><option value="liquid">Liquid</option><option value="lua">Lua</option><option value="luapage">LuaPage</option><option value="lucene">Lucene</option><option value="makefile">Makefile</option><option value="markdown">Markdown</option><option value="objectivec">Objective-C</option><option value="ocaml">OCaml</option><option value="perl">Perl</option><option value="pgsql">pgSQL</option><option value="php">PHP</option><option value="powershell">Powershell</option><option value="python">Python</option><option value="r">R</option><option value="rdoc">RDoc</option><option value="rhtml">RHTML</option><option value="ruby">Ruby</option><option value="scad">OpenSCAD</option><option value="scala">Scala</option><option value="scss">SCSS</option><option value="sh">SH</option><option value="sql">SQL</option><option value="stylus">Stylus</option><option value="svg">SVG</option><option value="tcl">Tcl</option><option value="tex">Tex</option><option value="text">Text</option><option value="textile">Textile</option><option value="typescript">Typescript</option><option value="vbscript">VBScript</option><option value="xml">XML</option><option value="xquery">XQuery</option><option value="yaml">YAML</option></select></span>
<div id="editor"></div>
<div id="footer"><a href="https://gist.github.com/tsi/5089758">Acelet</a> - Powered by <a href="http://ace.ajax.org" taget="_blank">Ace</a></div>
<script src="http://ajaxorg.github.com/ace/build/src/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
  var syntax = "scss";
  var e = ace.edit("editor");
  e.setShowInvisibles(true);
  e.setTheme("ace/theme/monokai");
  e.getSession().setMode("ace/mode/" + syntax);
  document.getElementById("mode").value = syntax;
  e.getSession().setUseWrapMode(true);
  e.getSession().setTabSize(2);
  e.setValue(decodeString("'+aceletValue+'"), -1);
  e.focus();
  function decodeString(string) {
    return decodeURIComponent(string)
           .replace(/%C2%A0/ig, "\\%20")
           .replace(/U0025/ig, "\%");
  }
  function saveToFile() {
    window.location = "data:application/octet-stream," + escape(e.getSession().getValue());
  }
  function changeMode(mode) {
    e.getSession().setMode("ace/mode/" + mode.options[mode.selectedIndex].value);
  }

  /*
  inspired by the discussion on https://coderwall.com/p/lhsrcq
  Written by Tsachi Shlidor (@shlidor)
  GPL Licenced
  
  Possible improvements:
  * Improve encoding/decoding
  * New
  * Load
  * Save (not save as)
  * Live HTML preview - https://coderwall.com/p/lhsrcq#comment_3609
  * Files sidebar (drag&drop)
  */

</script>
', '_blank');}());