demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Markdown Editors

tools / editors

Estimated reading time: 2 minutes

In the past I've suggested a particular workflow to creating body copy for web pages: write the text in Microsoft Word (taking advantage of the program's inline grammar and spell checking, correct typography, and easy exchange of the file with clients), then transfer the text into your web editor of choice, clean up the markup, and use the resulting HTML in your web page.

It is a system that works well, and is still my go-to option. But sometimes you just need to create a quick bit of text with markup: for example, writing a few paragraphs for a blog entry, or a short article for a CMS. For such a task the Word-DreamWeaver route takes too long, and DreamWeaver by itself is too much (and won't do correct typography).

Enter a compromise between the two: the markdown editor. Invented by John Gruber (of Daring Fireball) and Aaron Swartz, Markdown exists at a halfway point between a fully-featured webpage creation tool and a text editor: using a few, instinctive text shortcuts, a markdown process will take this:

###Preparation List for the Zombie Apocalypse

A few things I will need:

* Food and water for at least 60 days (*very important!*)
* Shotgun (**60 more shells needed**)
* Axe

And transform it into this:

<h3>Preparation List for the Zombie Apocalypse</h3>
<p>A few things I will need:</p>
<ul>
<li>Food and water for at least 60 days (<em>very important!</em>)</li>
<li>Shotgun (<strong>60 more shells needed</strong>)</li>
<li>Axe</li>
</ul>

Mou screenshotMy personal favourite markdown editor is Mou. It offers the features supplied by Word – inline spellcheck, correct typography – but generates valid markup at the same time. It also has really nice and specific features: the easy ability to add images, search based on patterns, auto completion, and support for multiple languages. It also has a minimum of buttons: simply start it up (Mou is less than 2MB in size) and start typing. This article was written in Mou, which is (as of this writing) only available for Mac, although there are other markdown editors for Windows: MarkdownPad is very similar to Mou.

If you're familiar with HTML, and need a tool to do basic markup without getting in your way, I'd encourage you to look into markdown editors: you might just find that they remove several steps from a task that should be about expressing yourself in human language, not wrangling tags.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.