Search code examples
markdownjekyllliquidgithub-pages

Jekyll Markdown, compiling images with paragraph tags

This is just a simple problem but it's one that I can't find on Google to solve this. Basically what is happening is that I have a Jekyll website, and I'm using kramdown for the markdown compiling.

When I add an image to a markdown file like below:

![Image Alt Tag](path/to/image)

It will compile it with a <p> tag when I don't want it to as seen below.

<p><img src="path/to/image" alt="Image Alt Tag" /></p>

This is how I would like the markdown file to compile with an image tag

<img src="path/to/image alt="Image Alt Tag" />

I am wondering where I'm going wrong or why Jekyll is compiling the images with paragraph tags.

Thanks in advance

---Edit: Tried another way but ended up with the same problem

I have tried this with only adding the html code which would be below:

<img src="path/to/image" alt="Image Alt Tag" />

and it would still compile with adding <p> tags as seen below.

<p><img src="path/to/image" alt="Image Alt Tag" /></p>

I am wondering why the markdown file is still adding <p> tags to html code when it is not needed?

Solution

  • Thanks to David Jacquel for putting me on the right path.

    It seems that an image is an inline element and that if Markdown detects an image that is not inside a block element such as <figure></figure>, <div></div> or other similar block elements then it will apply a <p></p> tag to wrap around the image.

    To see how Markdown compiles the document, I have found that Babelmark 2 is an useful resource and worth trying out to see if the markdown compiler that you are using is doing what you want it to do.

    Here is an example of what I used Babelmark 2 to figure out after the pointing out by David Jacquel on this particular problem.

    I hope this will help whoever has come across the same problem, and did not notice that it was an inline/block element issue.