How to insert image in Markdown syntax in WordPress

I'm using Markdown to write posts at Deluxe Blog Tips. It's a powerful tool for quick writing post without worrying about formatting. Markdown is used in big communities such as Stack Exchange or GitHub. Here I use Markdown on save plugin to make WordPress convert my markdownified text to HTML. I manually write everything: code, links, list, etc. and everything is working fine except images. I have to upload to Media Library via the uploader, copy the link and finally manually write in Markdown syntax. It's quite complicated and reduce the benefit of Markdown because I couldn't write as fast as I want. So I write a simple code to make WordPress generate Markdown syntax for images when inserting into post content.

Here is the code:

add_filter( 'image_send_to_editor', 'markdown_insert_image', 10, 8 );

function markdown_insert_image( $html, $id, $caption, $title, $align, $url, $size, $alt )
{
    list( $img_src, $width, $height ) = wp_get_attachment_image_src( $id, $size );
    return "![{$title}]({$img_src})";
}

Briefly, I use the image_send_to_editor filter to change the HTML code generated by WordPress to Markdown code. And I use the image title as the alt text, because I rarely use the real Alternative text when upload/insert image (or more precisely, if I use it, I always set it the same as image title). If you want to change the alt text, replace $title with $alt.

From now on, when I upload image, I just need to click to Insert into Post button, WordPress will generate Markdown syntax for my image automatically, which is great!

Comments