Markdown fans know they can write anywhere using the simplest of Markdown syntax. Versatility and scalability are but 2 words that come to mind.

I want to woo you into writing in WorkFlowy – and away from your favorite Markdown editor. There’s all the reason in the world why and zero reasons why not. Just the fact that WorkFlowy is WorkFlowy should be enough… then there’s the ability to automate it all and shape WorkFlowy into your very own customized Markdown editor.

With WorkFlowy you really can have your cake and eat it. I’ve been eating Markdown cake for quite some time now. While not an exhaustive post on Markdown itself, this was a show and tell of how you can automate it all in WorkFlowy and get the best of both worlds: A Markdown and Markdown preview hybrid.

0.1 Dual-mode irksomeness

There are Markdown editors where you toggle to preview…

… and there are those that have a split-screen layout:

0.2 Best of both worlds

My issue with Markdown editors in general is that you either have to jump in and out of preview mode (not so flowy) or have two halves of your screen cluttered with identical but differently formatted content. Then there’s the part about Markdown editors not having WorkFlowy-like powers – but at least they allow you to visualize what your formatted text is going to look like. More or less.

WorkFlowy is no Markdown editor. Thank goodness. But what if you wanted to use Markdown syntax in WorkFlowy and have everything look as close to the end format as possible? There are a handful of simple dynamics below which give us the best of both worlds…

1. Bold & italic

In the case of typographic emphases, you can wrap your words with single or double asterisks… and then actually italicize and bold those words as well:

We’re doubling up on Markdown and preview mode simultaneously. Before long the asterisks fade into the woodwork and we don’t notice them at all. Very readable.

In the above GIF you’ll see that after selecting any text I’m able to wrap it in the asterisks needed and emphasize it all in one go. What you don’t see is my text expansion app, PhraseExpress, running in the background…

2. Automate

PhraseExpress is a freemium tool for both Mac and Windows. Once installed, you can download and install this .pxp file, which contains all of the Hotkey demos shown in this post.

• Ctrl+Shift+N will both bold and wrap your selected phrase in double asterisks.
• Ctrl+Shift+I will italicize and wrap the selected phrase in single asterisks.
• Ctrl+Shift+3 will bold+italic and wrap your phrase in triple asterisks.

(You can, of course, change up the keyboard shortcut combos for any of the Hotkeys I’ve set up.)

Once you familiarize yourself with PhraseExpress, you’ll realize just how indispensable it is. You’ll begin to use it way beyond the confines of WorkFlowy (So no dragging your heels and being all reluctant to install additional tools). See PhraseExpress as an essential part of your general productivity toolbox. You’ll thank me later.

3. Headings 1, 2, 3 …

How do I get # Heading 1, ## Heading 2 or ### Heading 3, etc. to show up in WorkFlowy the way I’d want them to appear in a blog post or as a subheading in a book?

You can “hijack” WorkFlowy’s Underline emphasis so that any text you underline will take on your predetermined font style:

This involves a teeny tiny bit of CSS code in an itsy bitsy Stylish style:

1. Install the Stylish extension for your browser of choice.
2. Install this user style.
3. Edit the highlighted portions of the style pictured below via the Stylish extension in your browser, according to the 2nd font face you’re looking for:

I’m using a bold, oversized Merriweather font, since that’s what the WorkFlowy blog’s default “Heading 1” looks like in posts.

4.1 Shortening links

Since Markdown aims to provide an easy-to-read plain text format (as opposed to HTML), let’s make it a little easier and truncate our links.

Install this Stylish style… and you’ll be able to truncate your links to any length you want. When you hover over the link, it will expand to the original length like so:

The default link length is 250px, but I go smaller.

4.2 Embedded links

Embedded hyperlinks in Markdown are delimited like so:

• [your_text](your_embedded_link)

I have a PhraseExpress Hotkey set up to automate the formatting shown above. All I do is copy my hyperlink, select and copy the text where I want the link to be embedded and hit my PhraseExpress hotkey:

My keyboard shortcut combo is Ctrl+Shift+Alt+L, but you can change that up in the PhraseExpress resource provided.

4.3 Inline images

Inline image formatting is structured as follows:

• 

I’ve set up a PhraseExpress Hotkey (included in the .pxp file) which formats a Dropbox link correctly for viewing images inline by changing “dl=0” to “dl=1” and including the Markdown formatting I need. Here’s a demo:

Once my Dropbox image link is on my clipboard, all I do is hit Ctrl+Shift+L and it pastes into WorkFlowy as pictured above.

4.4 Viewing inline images in WorkFlowy

I’ve written 3 previous posts in this space, each of which offer a distinctly different method to view images in WorkFlowy.

• Imagus allows me to hover over image links to preview.
• The Tampermonkey extension allows for inline images in WorkFlowy.
• Web Page Sticky Notes gives you a full preview of all your Markdown within WorkFlowy.

5. Any font style for entire outlines

As pictured in tip #3 above, you can hijack WorkFlowy’s Underline span to get any font style for whatever text you underline. But what about entire outlines? I wrote a post on using custom font tags to transform entire outlines to the style you want.

With the particular WorkFlowy outline I used to write this blog post, I tagged it with my Merriweather font tag (remember that this is the default font for the WorkFlowy blog):

Just changing up the font of your WorkFlowy outline enables you get into the feel of whatever your end format will be, whether it’s a blog post, a dissertation or a book.

6. Paragraph breaks

For Markdown paragraph breaks in WorkFlowy, if you were working in a list’s note, you’d simply hit Enter. BUT… writing in WorkFlowy notes doesn’t give us the flexibility to shuffle paragraphs around. So how to get Markdown paragraph breaks when writing in WorkFlowy lists?..

For each bullet point/ list, you’re going to need to create a note and leave an empty space in it (Shift+Enter… Space). I have a PhraseExpress Hotkey that automates this at the time of creating each new bullet. If, however, you didn’t want to muck about with that, I’ve created a PhraseExpress Hotkey that goes through an entire outline and gives every list an empty note. It’s also in the .pxp file I provided in tip #2 above.

With the PhraseExpress Hotkey already set up, I just place my cursor at the top of my outline and hit Ctrl+Shift+Alt+B:

Note: the PhraseExpress script will loop 200 times, so you’ll need to hit Escape once your cursor gets to the end of your outline.

7.1 Exporting Markdown

Exporting your Markdown is a piece of cake. The easiest method:

1. Zoom in on your outline to be copied
2. Expand your outline fully by double clicking on the title
3. Alt+Click on your list title to select your entire outline
4. Copy-paste to a Markdown editor

7.2 Markdown editors

Markdown editors are a dime a dozen. Here are 3 that I’ve given a good working over:

• Dillinger – A classic split-panel Markdown editor with convenient Preview, Export and Save To options .
• Gingko – A tree-based text editor with Markdown and preview toggle. You can export to multiple formats including .docx (word).
• Texts (Windows & Mac) – An installable rich editor for plain text: Edit > Paste as Markdown. You can export to .docx, PDF and a bunch of other formats.

7.3 Final destination

• I always just copy directly from the Markdown preview, since it’s already in HTML format… and straight into a WorkFlowy blog post, which is hosted on WordPress.
• If I’m exporting to my Squarespace website, I can simply copy the Markdown itself to a Markdown code block within a post.
• I wrote 100% of my WorkFlowy book in WorkFlowy and exported to Word via Gingko. From there I “placed” Word documents into InDesign. I detail all of this in the book itself.

8. Demo list

Here’s a shared WorkFlowy list of the exact outline I used to write up this post. Do yourself a favor: copy the shared list as described in tip #7.1 above and paste into the Dillinger Markdown editor. You’ll see what I copy pasted directly into a WorkFlowy blog post with no further editing or formatting necessary.

Final thoughts

No Markdown editor is going to give you the customization I’ve just walked you through (the visuals for your actual writing). Many of the tips for automation (i.e. PhraseExpress) can even be used to streamline writing in Markdown editors themselves – because Markdown editors don’t have all of the “features” I’ve showcased in this post, let alone the organizational power that an outliner like WorkFlowy has.