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:

Schurpf Mardown Here Remove Styling

?

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

Schurpf Markdown Here Wipe CSS

?

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:

 

Schurpf Alfred Input Setup

and
Schurpf Alfred Action Setup

?

 

After you connect them they should look like this:

Schurpf Markdown Alfred Workflow

Schurpf Markdown Alfred Workflow

Let us look into the actual elements:

Schurpf Markdown Alfred Workflow Keyword

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

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

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.

Markdown – Markdown Introduction and using Markdown with WordPress and Evernote

Markdown Introduction

Let me tell you a little secret: You already know Markdown, you just don’t know it.

Am I full of crap in this Markdown Introduction? Certainly not, I am actually dead serious. Let me tell you what markdown is:

Text styling for mortals

or if you want the (boring) official definition from Wikipedia

Markdown is a plain text formatting syntax designed so that it optionally can be converted to HTML using a tool by the same name.

Told you my definition was cooler :)

This in plain English means, Markdown allows you to write a styled document without using some of the really weired styling syntaxes. For the rest of this article we will assume that we use Markdown to write HTML, if you need anything else, Google is your friend :)

Let us study some example to see the power of Markdown. Consider writing a header in HMTL, you would write:

<h1>Your Title</h1>

that is 9 symbols to encode a header. Now lets use Markdown

# Your Title

we use 1 symbol in markdown. Cool no?

Or take something as common as a list (who doesn’t love lists…):

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
<ul>

and compare the above HTML version to the below Markdown:

- Item 1
- Item 2

I officially have a cramp in my hand after writing this ul list without Emmet ( a story for another day…).

Lets us look at some more examples, take just a simple paragraph

<p>Some paragraph.</p>

against

Some paragraph

In short to write a paragraph you have to do nothing. This is very similar to the WordPress content editor.

One final example to have our list of the most used Markup commands complete: A link:

<a href="http://somelink.com">Link</a>

and our Markdown sample:

[Link](http://somelink.com)

I think I did enough convincing for you to see why Markdown is awesome.

Let us talk what speaks against Markdown?

  1. It is only a subset of HTML, meaning you can not do all HTML functionality. For example if you needed classes or some HTML 5 tags.
  2. You have to process it (compile it) to get to actual HTML if you want it to display nicely.

Ugh, number 2 is in reality what really kills Markdown quite a bit. The second you have to compile (convert) something it becomes less usable for the average joe.

Let me focus for the rest of this post about how to use Markdown with WordPress and Evernote.

Markdown Cheatsheet

Markdown HTML
Header # Your Title <h1>Your Title</h1>
Paragraph Some paragraph <p>Some paragraph.</p>
List - Item 1- Item 2 <ul>   <li>Item 1</li>  <li>Item 2</li>

<ul>

Link [Link](http://somelink.com) <a href="http://somelink.com">Link</a>

and just in case you were curious how this table above looks in Markdown:


 | Markdown | HTML
---| --- | ---
Header | `# Your Title` | `<h1>Your Title</h1>`
Paragraph | `Some paragraph` | `<p>Some paragraph.</p>`
List | `- Item1` `-Item2` | `<ul> <li>Item 1</li><li>Item 2</li><ul>`
Link | `[Link](http://somelink.com)` | `<a href="http://somelink.com">Link</a>`

Blog with Markdown in WordPress using Evernote

Check out this next post of this series: Blog with Markdown in WordPress using Evernote. Let me know if you have any questions in the comments below.