An Offline Text Editor for Chrome in One-Line of Code
• ~200 words • 1 minute read
I've been researching web-based code editors this evening for a web development and programming class I'll be teaching to kids. There are lots of good options, but nothing quite perfect yet. I'm actually very fond of the editor Khan Academy is using, but I'll write up a comparison of those findings another time.
What I did stumble across is a fun trick you can use in Chrome, Firefox and Safari to make an instant text editor in your browser! This post on Lifehacker is three years old, but I just stumbled across it. All you have to do is type the following into your browser:
data:text/html, <html contenteditable>
That's it! Suddenly you have an editable web page. In Chrome you can even use keyboard shortcuts to make text bold or italicized. If you hit Command or Control S you can save it to your computer. It's also simple to bookmark and works offline.
If you want it to feel a little bit more like a minimal text editor try this:
data:text/html,<html contenteditable><style>body{font-family:monospace;font-size:1.5em;line-height:1.5em;padding:2em}</style>
Or maybe you're on a Mac and want it to use San Francisco:
data:text/html,<html contenteditable><style>body{font-family:-apple-system,BlinkMacSystemFont,'Courier';font-size:1.5em;line-height:1.5em;padding:2em}</style>
This even works on iOS! However, saving your notes may prove to be a little difficult. Most the share tools I experimented with only sent the URL off to those other apps. That will be something to experiment with later.
Kind of fun!
Follow this link to give it a try.