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!

4 thoughts on “How to insert image in Markdown syntax in WordPress

  1. I just put this code in functions.php but seems doesn’t work. I’m using Markdown on Save plugin as described above. Do you have any suggestions?

    Fabio

    1. Yep, it works but you must replace the ‘dbt_markdown_insert_image’ with ‘markdown_insert_image’.

      There’s a mistake in the name of the function.

Comments are closed.

Newsletter

Subscribe to our newsletter to receive news and tutorials about WordPress and web development.

Meta Box - Create advanced WordPress custom fields and custom meta boxes with ease Download Now