Markdown with WordPress with Evernote – Easy Markdown Blogging

I love http://evernote.com. I use it to store all sorts of files, thoughts and of course blog posts. The only problem (and a major) problem is that it is super impractical to use in connection with WordPress (something else I love a lot :)). The solution really is Markdown, but how do you get them all to play nice with each other. If you are new to Markdown, please read this short introduction to Markdown.

Ideal Workflow – Evernote to WordPress

Lets talk about what we want.

• Write in Evernote with Markdown
• Publish in WordPress

Evernote to WordPress

Evernote is a rich text editor, as such when you copy paste it will take all sorts of custom styling with it. The main problem I face is if I copy paste quotes, materials and links together I very often have somewhere some random font size, font color or font family. To avoid this I very often use paste as plain text or CTRL-SHIFT-V. This on the other hand means to lose any linked up text or images which is pretty annoying.

The solution is to use Markdown and always paste as plain text. Let me demonstrate you the best solutions to convert Markdown. If you are new to Markdown, check out this introduction to Markdown.

Best solution: Browser Extension – Get Markdown, WordPress and Evernote to play nice

My favorite solution at this point is the Markdown Here browser extension. All you really have to do is install a browser plugin and hit a hotkey in your browser to convert your Markdown to HTML. Simple and easy.

I do remove the default stylings from Markdown Here since otherwise they would interfere with my Theme styling. Here is how you remove them:


?

In your browser, right click the Markdown Here icon, go to options.


?

Delete all the css you see in the options. That is it.

This is my preferred solution and I use it all the time. Anyway, just in case you don’t like this solution here are some other solutions in no particular order.

Markdown with WordPress Plugins

There are multiple. From what I could read, the best looked like https://wordpress.org/plugins/wp-markdown/ closely followed by:

• http://jetpack.me/support/markdown/
• http://brettterpstra.com/projects/markdown-quicktags/

There are a few problems with the plugins.

• Legacy blog posts
• Unistalling the plugin

What I would be really worried about is how those plugins treat old blog posts where you use classes or other html in your posts. I have no idea how those plugins handle that since they try to convert HTML to Markdown for editing. The second thing to be worried about is how those plugins store your blog posts, because the Markdown itself does not render in a browser, so you definitely need to test how your blogs look after you unistall a plugin.

I didn’t get a chance to test any of those plugins, but here is what I would do:

1. Create 2 blog posts, in one of them use classes and other html tags (span, iframe …) in my post
2. Install the plugin
3. Create 2 more posts with Markdown
4. Try and modify the post created in 1.
5. Uninstall plugin
6. Modify all posts without plugin

If all this works, I guess those plugins would be useful.

Online Editor/Convertor

There are several online editors you could use to write and convert your Markdown. Those are a fairly good alternative to writing in the native WordPress editor:

• http://markable.in/
• http://jrham.es/instantmark/
• http://dillinger.io/

OSX – Local Editors Convertors

There is also a bunch and I wasn’t too interested in this category. The one though that looks most useful is marked in combination with Sublime Text 2. Check out this tutorial over on tutsplus by @jeffrey_way.

OSX – Markdown Terminal Compilers

The easiest way to get markdown to your terminal is:

brew install markdown

alternatives would be:

• Multimarkdown: brew install multimarkdown
• Pandoc: http://johnmacfarlane.net/pandoc/installing.html

One little snippet I use sometimes is to convert my clipboard content from Markdown to HTML. This snippet is:

pbpaste | multimarkdown | pbcopy

If you use this a lot, I suggest you set a alias for it in your .bash_profile like they show over at maclife: http://www.maclife.com/article/columns/terminal_101_creating_aliases_commands

OSX – Markdown with Alfred

Now we are talking. Alfred rules. To setup a workflow (you need the Alfred Power Pack) create a new Workflow using an Inputs->Keyword and an Actions->Run Script:

 and 

?

After you connect them they should look like this:


Schurpf Markdown Alfred Workflow

Let us look into the actual elements:


Schurpf Markdown Alfred Workflow Keyword

all we do is set a keyword trigger to have alfred execute our shell script.


Schurpf Markdown Alfred Workflow Script

Notice the language is set to /bin/zsh and not /bin/bash plus we are escaping spaces. After that just paste in our script from above and you got yourself a nice little Markdown convertor.

Markdown Variations

I have quietly used multimarkdown in our terminal script above. Let me say a few words about the different Markdown variations. There are several with the traditional Markdown being the first one. Any variation from it has some additional elements you can do of the traditional Markdown syntax.
Especially for programmers the traditional Markdown with _word_ being turned to an italic word is pretty disturbing. This is why there is a special GitHub Flavored Markdown.

Some markdown variations worth checking out:

• https://help.github.com/articles/github-flavored-markdown
• https://github.com/adam-p/markdown-here/wiki/Markdown-Here-Cheatsheet
• http://fletcherpenney.net/multimarkdown/

If you come accross any other great one, let me know.

Markdown Styling

One of the reasons why I love my Markdown Here browser extension so much is that it comes with syntax highlighting css (uses same as github) this is very nice for emails.

Bonus Trick – External Images with Markdown and WordPress

I very often use Jing to take screenshots for my blogs (see all images in here). Those images will be hosted somewhere else. In order to avoid losing those images, I use a plugin called Import External Images. This will give you the option to import your images to WordPress and avoid having to upload them manually! Yay productivity 🙂

Bonus Trick 2 – Spacing

Sometimes your converted html will look very strange. I always do double spaces before and after lists. This should fix it 🙂


WordPress Import External Images

Further Reading

Here is a very good post by Chris Coyer about Markdown and syntax highlighting: http://css-tricks.com/posting-code-blocks-wordpress-site/

Final Words

Uff, long post, hope you got a lot out of this Markdown Introduction and learned how to use Markdown with WordPress and Evernote. Please let me know if you have any questions or if you have a tip for other people reading this.