The Markdown Workflow

Learn how to use the Scrivener Blogging Workflow along with Markdown for an even faster and seamless system.

The workflow for using Markdown is very similar to the standard workflow except faster. This workflow also gives you more control over formatting and makes the transfer and publishing in WordPress a breeze. Here is a quick outline of the steps involved:

1. Write blog posts in Scrivener within the "Drafts" folder. The only difference here is that you will be writing using the markdown syntax where necessary.

2. Easily preview your markdown file by copying the text and pasting it into the markdown previewer included in the template

3. Install Markdown QuickTags plugin on your WordPress site for super simple markdown previewing and publishing.

4. VA (or you) copy the blog post text from Scrivener and paste into the WordPress text editor.

5. Click "Render" (if using Markdown QuickTags plugin).

6. Add any images.

7. Publish!

*Note: If you choose not to use a markdown plugin for WordPress you can still have Scrivener export your markdown text to html by going to File > Compile > Compile For > MultiMarkdown - Web Page (.html)

Previewing Markdown Inside Scrivener

1. Write blog posts in Scrivener within the "Drafts" folder. The only difference here is that you will be writing using the markdown syntax where necessary.

 

4

 

 

2. Easily preview your markdown file by copying the text and pasting it into the markdown previewer included in the template.

Options: You might want to split the editor view to make this easier. Here's how: 

Go to View > Layout > Split Vertically

5

You can see which editor is active by the blue bar at the top. Select one of your editors to display the Markdown previewer.

6

 

Select the "Markdown Editor" file in the Research folder.

 

7

 

Make sure the other window of your editor displays the blog post you are working with.

Now click anywhere inside the editor and select all the text by using the following keyboard shortcut:

Mac...Command + A

PC.....Control + A

8

Once all the text is highlighted - use the following keyboard shortcut to copy the text.

Mac...Command + C

PC.....Control + C

 

9

 

Now to paste the text into Markdown editor using the keyboard shortcut:

Mac....Command + V

PC......Control + V

10

Now you will see a side-by-side preview of how your markdown text will look.

 

11

 

If you need more space simply click the icon in the top right of the editor you want to expand.

 

12

 

This will now bring the selected editor back into fullscreen.

 

13

How To Use Markdown with WordPress

The Easiest Way

Install Markdown QuickTags plugin on your WordPress site for super simple markdown previewing and publishing.

Select the "Add New" option from the Plugins menu inside your WordPress dashboard.

1

Enter "Markdown QuickTags" in the search bar and select "Search Plugins".

 

2

Find "Markdown QuickTrags" and choose "Install Now". And Activate.

 

3

 

Now create a new post in WordPress.

You should notice a slight difference in the editor.

With Markdown QuickTags installed and activated you should see a small menu under the editor as seen in the image below.

 

1

Now click on the text tab.

This is where we will be inserting our Markdown text.

 

2

 

Back To Scrivener

Back in Scrivener simply navigate to your blog post.

Click in the text editor

Copy the entire text using the same keyboard shortcuts as mentioned above.

 

3

Back To WordPress

Now simply paste this text into the WordPress text editor.

 

4

Now it's time for the magic.

Click "Render" in the bottom menu.

 

5

You'll notice that this converts the markdown text to HTML on the spot.

 

6

Now click on the "Visual" tab and you will see the results.

 

7

Add in your title and any images and you're done!

Publish away!

8

 

Pretty simple right!?

What If I'm not Using A WordPress Plugin?

No worries - Scrivener can easily convert your markdown text into HTML. 

Here's how:

In Scrivener: Go to File > Compile

1

Put a check mark by the file you want to compile. 

 

2

Select Compile For > MultiMarkdown – Web Page (.html) 

Then choose "Compile". 

3

Enter a title in the Save As box and choose a location like your desktop to save the file to. 

Choose "Export" 

 

4

Locate the file on your computer.

In this example I chose to save it to my desktop. 

Open the file with a text editor. 

In the example below I simply right-clicked on the file and chose Open With > Text Edit

 

5

You will see the HTML in your text editor.

 

6

Click inside the editor and select all by using the keyboard shortcut:

  • Mac...Command + A
  • PC.....Control + A

Then you can copy the text by using keyboard shortcut: 

  • Mac...Command + C
  • PC.....Control + C

Or you can right-click inside the editor and choose "Copy" from the pop up menu.

 

7

Back To WordPress

Back in the WordPress editor make sure you are in the "Text" tab. 

Click inside the editor and paste the text by using keyboard shortcut:

  • Mac...Command + V
  • PC.....Control + V

Or you can right-click inside the editor and choose "Paste" from the pop up menu. 

 

8

You should then see the HTML text inside the editor.

 

9

Click on the "Visual" tab to preview your text. 

 

10

Add in your title and any images.

 

8

That's it!

You're ready to publish!

Bonus! How To Use TextExpander To Make Markdown A Cinch

"Just when you thought it couldn't get any easier! IT DOES"!

 

Hopefully by now you see there is no faster way to format your text for the web than using Markdown.

It’s easy to learn (you should be fluent in about an hour, even if you’ve never coded before) and it’s fast to write in.

It allows you to save all of your files in plain text, which is essentially the most universal format there is, and is easy for anyone who edits your work.

Now in theory, once you’ve learned the basics, you’re good to go.

The beauty of Markdown is that you don’t need aids to quickly format for the web.

But… if you are an efficiency junkie like me we want to do it faster and easier, so here’s how…

 

Making Markdown Even Faster With TextExpander:

TextExpander is only Mac only. 

If you are not familiar with Text Expander here's a short description from their website:

"Type more with less effort! TextExpander saves your fingers and your keyboard, expanding custom keyboard shortcuts into frequently-used text and pictures...

Or checkout this testimonial:

“If you find yourself rewriting the same lines of code, the same paragraphs, even the same signature over and over each day, you’re doing it wrong. How many hours each year would you save, simply by turning an eight second repetitive typing task into a keystroke? Especially in my particular circumstance, TextExpander is 100% a necessity.”

-Jeffrey Way, 20 Mac Apps You’ll Use Every Day

Ok, assuming you are familiar with TextExpander let's proceed.

The following workflow is thanks to a post by Michael Schechter titled "How A Lazy Person Writes In Markdown"

Wrapping Tex In Markdown

When creating links, bolding and italicizing text, you need to “wrap” your text. This means that your brackets, parentheses, asterisks and underscores need to appear before and after the word(s) you are formatting. There are several ways to speed this up, but in this case, the best option is actually the simplest: use an application that automatically does this for you.

And that is where the beauty of these TextExpander snippets created by Michael Schechter come in so handy. You can click the picture below to download them.

1

 

 

Working With Markdown Using TextExpander Snippets

 

1. First you will obviously need TextExander to use these.

2. Download the Snippets

3. Load them into TextExpander by double clicking the download file

 

2

 

4. Once loaded into TextExpander they will show up like this:

 

3

 

5. The letters on the right side are the characters that trigger the action.

 

4

 

Let's See This In Action

So for example when bolding something in Markdown we know that we have to add two "**" before and after the word or phrase that we the emphasis on right?

Well...with the snippets you no longer have to type out the "**" before and after the word.

All you have to do is simply type "mB" and this box will automatically pop up.

 

5

Simply continue typing in the word or phrase

6

and hit enter when finished and you get a result like this:

 

**Markdown Rocks!**

 

Perfectly formatted in Markdown bold.

Let's Try It With Links

Ok so let's say I wanted to tell you about this awesome site.

I would just type the keys "rL" and this box would pop up for me to fill in:

 

7

 

Once I fill in the text hit enter my text will automatically spit out like this:

 

[this awesome site](http://www.EfficientLifeSkills.com)

 

Throw this into my favorite Jon Combe Markdown Previewer and you'll see that it is a perfectly formatted text link.

8

Pretty cool right?

If you want to see more examples of how this works I've include the following video from Michael Schechter: