Byword with Marked is my preferred way to write for web publication. Byword has a simple and clean way about it, and it handles Markdown better than any other text editor I have tried. Marked 2 helps with a live preview as I write.
There are a couple other tools that take the workflow even farther. I’ll introduce those, but first a little about the reasons I needed them.
In the old days, if I wanted to post to my blog, I would log in on the WordPress post editing window and tap away. When I wanted to add a image, I’d click the “add media” button and fish around on my computer for the file, upload it, pause and consider the dozen options it gives you for posting an image.
Then it was back to writing and seeing if I could remember where I left off. I could go on, but anyone who has used WordPress, or any web publishing platform for that matter, knows what I’m talking about. Composing a piece of writing on a web page sucks.
Enter Byword and Marked and a couple other small apps that make things even easier.
Now I compose in a text editor that auto-saves. When I need to add an image, I drop the image on a little icon that drops from my menu bar, wait a few seconds, and a URL to the image’s new internet home appears on my clipboard.
I post the URL into the file I’m editing. The beauty of this is I can handle the image portion at any point in the writing process. If I’m writing a tutorial that uses ten images in a particular order, I simply follow the process and paste URL’s at the bottom before I begin writing. I’m creating reference links anyway, so I list them in the order I plan to use them. Or I can add them as I go along, or put them in once I’m finished writing.
What are reference links you ask?
: http://website.com/image1.jpg : http://website.com/image2.jpg
Those appear at the bottom of the .md file (or anywhere else you want to put them).
The following is the code that actually places the pic.
![What I want to say about the pic]
The exclamation mark followed by text in brackets is the “alt text” for the picture. The number
 within brackets points to the respective image file.
Oh, and that app I use that magically puts the file on a server is called Dropzone. You set up a FTP transfer to your image server.
There are other handy things Dropzone does for you, and there are probably other solutions for setting it up to deal with your images. My method requires that you have access to your own server space with FTP access.
If you are using WordPress self-hosted, you probably have it.
If you want to take it to the next level, give TextExpander a try.
TextExpander saves your fingers and your keyboard, expanding custom keyboard shortcuts into frequently-used text and pictures…
For example, I created a TextExpander snippet for Markdown reference links that allows me to type a few keystrokes and a popup appears prompting me to enter the name of the reference. When I hit enter, it pastes the whole shebang, URL and all, and puts my cursor at the end of the line.
TextExpander is handy for other things like email signatures or anything else you type often. You can also set it to spit out the current date or time. Check it out and see if it’s right for you.
If you already know what Markdown is, skip to the comments and say nice things about me. What follows is just a barebones intro to Markdown.
Wikipedia has a nice page on Markdown that will tell you more than you need to know.
Markdown is a plain text formatting syntax designed so that it optionally can be converted to HTML using a tool by the same name. Markdown is popularly used to format readme files, for writing messages in online discussion forums or in text editors for the quick creation of rich text documents.
The nice thing about markdown is that it is super-easy to learn. You probably already know some of it without even knowing it. (Or something like that.)
When you are typing something where you can’t use bold or italics and you want to give emphasis to a word, what do you do? Most people might do something like…
or apply fake underlines…
If you’ve ever done that, you’ve used Markdown. Either of the above methods italicizes the text. Double up on the asterisks or underlines
**like this** or
__this__ and you apply bold text.
You already know how to add links and images.
- List - Bullet list - Bulleted list
Put dashes in front of lists to make bullet lists. Put numbers in front of them for ordered lists.
Another nice thing about Markdown is that it lives in plain text. That’s a format no one owns and I’m pretty sure it will last forever. You can open a markdown file in any text editor, including the ones that came with your computer. Try opening a Wordperfect file.
What’s Wordperfect you ask?
Exactly my point.
Unlike HTML which is much more difficult to learn and makes reading your composition confusing, Markdown lends itself to being easy to read.
I almost forgot. Marked 2, the app I mentioned at the beginning, not only previews your Markdown files, it also spits them out as .pdf files, Word documents, HTML, rich text and rich text with pictures, and ODT files.
By the way, you don’t have to buy any of the apps I’ve mentioned to take full advantage of Markdown. Do a web search for online editors and play with it a little. I’m pretty sure you can find open source and other free alternatives to Marked as well. But if you stick with it, I can’t recommend Marked 2 strongly enough.