In Markdown, is there a way to stop images from being wrapped with <p> tags?

Question

I'm using Jekyll and all my posts are in .md format for convenience. The problem is that the generator is automatically wrapping every line in paragraph tags.

line

<img>

line

becomes

<p>line</p>

<p><img></p>

<p>line</p>

and this means that my images are restricted to the width I've set for my paragraphs, which is messing up my styles.

Any ideas what I can do to avoid this? I've tried both html syntax and markdown syntax for the images but nothing seems to work.

Thanks!

Answer 1

I don't think so. The original Markdown spec says:

A paragraph is simply one or more consecutive lines of text, separated by one or more blank lines.

It might be possible to come up with some nifty CSS to fix your styling issues though.

Or you could try this hack (works in Pandoc):

line

<div><img></div>

line

Answer 2

Images are inline elements, intended to reside within a block-level element like a paragraph. Markdown parsers are therefore correcting your ‘mistake’ and wrapping the img inside a paragraph tag.

Wrapping your img tag inside an appropriate block-level element, like figure should prevent this behaviour. Eg:

<figure><img src=""></figure>

If you want to automate things a little and you are not planning to generate your site on Github pages (where plugins are not allowed) then you can make use of a plugin to assist in this and make image insertion in your posts easier. I'm using a modified version of this plugin:

https://github.com/opattison/jekyll-figure-image-tag/blob/master/figure_image_tag.rb