Posts tagged "markdown"

On 19 April 2011, at around noon Pacific time, I published a short tweet.

Hashify is officially live as of now! bit.ly/dXYxGU

Quite to my surprise word of the release spread incredibly quickly, thanks in large part to the Hacker News thread that sprang up and received a great deal of attention.

The vast majority of the ensuing discussion focused on the implications of stuffing documents into URLs, and of using bit.ly as a document store. While there was much debate as to whether this "cool hack" will turn out to have practical application, the one undoubtedly useful component was overlooked.

Markdown editing for the masses

Before dropping off the face of the earth, John Fraser created Showdown and wmd. The latter is a WYSIWYM Markdown editor, popularized by Stack Overflow. I've long been supportive of wmd's goals, but I've never liked its implementation.

Several drawbacks of wmd encouraged me to write my own Markdown editor:

• Its use of inline styles makes it difficult to customize the toolbar's appearance.
• Many HTTP requests are required to retrieve the toolbar icons.
• Lack of modularity: Showdown is a dependency.
• Unnatural keyboard shortcuts.

Hashify Editor addresses these concerns. Styles are applied via a style sheet, and selector specificity has been kept low to make overriding default styling simple. Selectors are prefixed with hashify-editor to prevent erroneous matches. Additionally, the images have been sprited, optimized, Base64 encoded, and included in the style sheet as a data URI.

Hashify Editor does not require Showdown, as its focus is on turning the humble textarea into a useful Markdown editor. TextMate-style keyboard shortcuts make it a joy to work with metacharacters and text selections.

Best of all is the preview option: one is able to view — and of course, edit — the text at hashify.me with a single click.

Hashify Editor at David Chambers Design

Comment preview at hashify.me

Adoption

I love sites which support Markdown commenting. Unfortunately many of those that do — even Forrst — don't provide previews. As a result, each time I'm about to submit a lengthy comment I select all, copy, open a new tab, go to hashify.me, tab into the editor, and paste in my comment. Were Forrst to integrate Hashify Editor, six of these steps could be replaced by a single mouse click. :D

Using the -m flag can be a timesaver, but for several reasons I prefer to write my commit messages in a text editor:

• Spell-checking
• Familiar keyboard navigation
• No need to escape quotation marks

TextMate is particularly well suited to my needs due to its built-in Markdown highlighting and previewing – yes, I write commit messages in Markdown!

To set TextMate as Mercurial's editor, add editor = mate -w to the [ui] section of your ~/.hgrc file.

Vince Cima explains:

Next time you do hg commit TextMate will open a temporary file you write your commit message into. Type your message, save the file and then close the window to finish the commit. The -w flag on the mate command tells TextMate not to return control to the command line until the editor window has been closed.

git config --global core.editor "mate -w"

Comment forms that don't provide previews — or at least an indication of how comments are processed — really annoy me. If I decide to leave a comment I take care to avoid spelling mistakes and grammatical errors. It's quite upsetting, then, to see my code snippet completely mangled and my carefully typed links displayed in plain text (<a href="…).

Despite my appreciation of the preview, not one of my sites provided this service until a few hours ago. Now that I've migrated from WordPress to Mango I'm able to spend some time working on front-end code. My first two challenges were localizing dates and times, and integrating wmd.

Getting wmd working turned out to be extremely easy, but I was not content with a live preview of the comment only. No, I wanted the preview to resemble as closely as possible the published result, which meant updating the preview area in response to changes to "name", "e-mail", and "website" as well as to changes to the comment itself.

This was a great deal of fun to implement!