Deluxe Blog Tips About Projects

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!

Subscribe to the Newsletter

Subscribe to get my latest content by email. I won't send you spam. Unsubscribe at any time.