Don’t you wish that you could just quickly preview the code in your head sometimes? Or maybe you want to show someone a part of your code really fast, or, you have a snippet from somewhere that you want to see with the syntax highlighted. Well, that’s what an editor is for, but setting up projects in your editor can sometimes feel like a chore. It can be a pain to always create a new file or remember to remove your example code when simply showing someone a snippet. Well, a while back, while playing with Google Chrome’s “data:text/html," URL which allows you to use the browser window as a quick note clipboard, we thought it would be great to apply this same principle to code. So after checking out running editors in the browser, we discovered Ace.
Now that we’ve identified the editor we want to use, how do we pull in the script and set everything up with minimal work required? Well, data:text/html supports adding any html, including script tags. Now we’re starting to form something cohesive!
data:text/html,
We now have our script, but we need something to call it on. Right before we call the script we will add a DIV and some basic styling to make the DIV take up the whole window like so:
data:text/html,
Now, the only thing left is to instantiate our editor on the “js-editor” DIV:
If you look at the setMode method, you will see that it’s set for JavaScript, but you can set yours to any language supported by Ace.js
To wrap up, the whole snippet now looks like:
data:text/html,
Simply bookmark the URL and you have an instant text editor! Enjoy!
Was this quick text editor trick helpful? What other tricks and hacks do you use? We’d love to hear from you, so drop us a line in the comments or tweet us @Pixafy!
