Editing Code in the Browser

My other tip showed how to make a bookmark that opens a web browser window with a simple text editor in it. But there is a lot more you can do with a browser and a bookmarklet. These examples open a code editor with syntax highlighting and even formats markdown code.

These examples are modified from the examples on the page This bookmarklet gives you a code editor in your browser with a single click.

First, this:

data:text/html, <style type="text/css">.e{position:absolute;top:0;right:0;bottom:0;left:0;font-size:18px;}</style><div class="e" id="editor"></div><script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("editor");e.setTheme("ace/theme/kurior");e.getSession().setMode("ace/mode/html");</script>

Now that is a bit hard to understand, so lets break it down a bit. Note — I've added some line breaks which may or may not work if copied and pasted.

data:text/html,

The data uri - this tells the browser that the uri is an embedded document or chunk of data, rather than the location of a resource on the internet. More about data uri's at Wikipedia.

In this case, the data is html.

<style type="text/css">
    .e{position:absolute;top:0;right:0;bottom:0;left:0;font-size:18px;}
</style>

A simple inline style sheet. I have made the font size 18pt so it is easier to read.

<div class="e" id="editor"></div>

A container div where the Javascript will add the editor.

<script
  src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/ace.js"
  type="text/javascript" charset="utf-8">
</script>

Now it starts getting a little more interesting — this is the location of the Ace embedable code editor. It is pretty much a complete application written in Javascript — and it makes you think "What about CKEditor?".

Anyway — this loads the editor code, and the next bits configure it.

<script>
    var e=ace.edit("editor");
    e.setTheme("ace/theme/kurior");
    e.getSession().setMode("ace/mode/html");
</script>

So we set e to the editor and load it into the div with the id editor. We set the theme to kurior, and the highlighting mode to HTML. Loads of themes and highlighting modes are available.

The cool thing is you can also set other ace configuration values — for example e.session.setUseWrapMode(true); enables softwrapping, e.setValue("the new text here"); will add some default text.