How I write blog posts in Markdown

[fwilhe]

My colleague miroll described his process to write blogs in Markdown recently.

Since I've decided to blog about my journey with Garden Linux, I've been looking for a way to write my posts in Markdown.

There are a few reasons for this:

• I'm used to write text in markdown, so I think it is more comfortable to do compared to the WordPress editor


• I'd like an easy way to share my drafts with others
  
  
  
  • On SAP blogs, the only way I know how to share drafts is to 'print' them as pdf which does not give nice formatting, or to copy the draft contents into an email or similar
  
  
  
  


• I like having a backup copy of my posts in case a blog post gets lost

I've tried a few different approaches, and I've settled on a simple one.

I was looking for a way that automates as much as possible and leaves little room for error.

I use pandoc to generate the html from my markdown file:

pandoc "$file" --from gfm -o "$file".html

My first attempt was to copy and paste the generated html into the 'source' view in wordpress. Sadly, this leaves me with bad formatting.

What works better is to open the generated html in a browser and copy the formatted text from there.

This gives me nice formatting, but it omits all the pictures.

And even worse, if I add the pictures in the wordpress editor make changes to my original markdown file, copy the whole html again and paste it into the wordpress editor, I the pictures are gone.

I tried to create 'standalone' html files in pandoc which encodes the pictures as base 64 strings, which allows me to copy and paste the whole post including the pictures, but this triggers a Not Safe for Work filter because the base 64 strings contain 'words' that are in the filter list.

I found that when I'm creating the pictures in this format

![](./my-picture.png "My Alt Text")

I do get visual indicators for where the pictures need to go in the visual wordpress editor.

This is what it looks like in the editor:

So I try to copy the generated html late as possible into the visual wordpress editor and then manually add the pictures.

To make this easier, I'm sticking to a name schema where the image file names are sorted alphabetically, for example 03-a-foo.png, 03-b-bar.png etc. This schema reduces the chance of me messing up which image should go where in the blog post, as I simply add them from top to bottom of the post in order.

It does preserve the alt texts of the images, which is nice.

I guess it should be possible automate the whole copy-paste thing via an api, but in the limited time I tried to find a solution for this, I did not find a way to do this.

Does anyone know a better way to write blog posts in Markdown? I'd be curious to hear about that.