Where is the perfect writing tool?

If you don't know, the very first day this year I promised myself I'll write a blogpost every day. It's the twelfth day and I already hate the editorial experience.


My biggest problem is source code embedding. Inserting source code without a special format is ugly.  You need at least fixed with font with a special highlight. The font and background color the wysiwyg editor offers is just not capable of doing that. Line breaks will cause gaps in the background color and looks clunky.

Many suggests using SyntaxHighlighter - a nice minimal source code parser library. To make it work with Blogspot you have to edit the blog page template, add the necessary JavaScript and CSS files - and then tag all your source code in the post with PRE tags using a special class. It requires editing the source, removing the line breaks and extra DIVs the wysiwyg adds. Not too bad - I was using it many times - but still pain.

Then I've found that Pastebin can highlight the source for you and provide a nice embed code - iframe or script. Both works - however iframe fixed sized by default, so you have to set the height manually. The source tag will generate the right HTML snippet, however the wysiwyg editor will delete almost immediately you lurk around the tag in Compose mode.

Then I tried using images that I take in the IDE. That's not too hard to embed - however your readers will curse you to death.

Some of my colleagues suggested to me use Octopress, an open source tech-blogging platform based on Ruby. It looked nice, however I really don't want to migrate now and host it. I'd lose so many features provided by Blogspot - such as SEO, widgets and some smaller features. And even I chose hosting a custom solution I'd probably go for a Drupal site. But then it's inevitable that you'll spend more time polishing your backend than writing articles.

I was wondering what other blogs are worthy around the interwebs: Typepad, Squarespace or Wordpress blogs seemed nice but not better options. I don't really care much about fancy styles or hosting solutions. I need editorial experience.

So I gave up the hunt and decided to make my own tool. My articles are not too fancy. Some headers, images, code samples. I want to write in one textarea and want to have all the separation with the smallest effort is possible. The implementation idea is the following. You have three panels:

• writer panel where you write
• preview panel that shows the result
• copy and paste panel where you can copy from your content to blogspot.

I invested a few hours to make a proof of concept, you can find the repo here: https://github.com/itarato/BlogWriter 

See the live demo on: http://178.79.184.166/blog/blog_writer/

The workflow in a nutshell: you type in the textarea. On each keyup event you get the text, generate the final result and put one copy to the preview area and once copy to the paste box. The processor using several filters. I wanted a very simple syntax inspired by the markdown standard:

line = prefix + text

prefix = main_prefix + params + . (dot)

main_prefix = [A-Z]{1,}[A-Z0-9]*

params = null | : (colon) + [A-Z0-9]* + params

text = anything

The current prototype knows headers (1-6), eg.:

H1.This is a title

and source code:

CODE.function foo() {

}

/CODE.

The code is far from great, for sure. But it's a good start. I can just type and copy-paste and done. I'm planning to add several new filters, code language parameters, image link converters and some others I cannot think of now.

Oh one thing! How about a saving mechanism? I added HTML5 local storage to save your post, so you don't have to be afraid of refreshing your browser or going back.

---

If you know a great editorial workflow, please save my life and let me know:)

Peter