For Some Reason Markdown Images won't show surrounded by HTML

Question

So for some reason when I have my markdown image tag wrapped in a <div> or a <section> it just outputs markdown code. http://d.pr/i/bPvI (screenshot)

<section class="photoset">

![Image of San Francisco bay bridge from beach](/images/san-francisco.jpeg)

</section>

But when I remove the HTML code it shows the image but is wrapped in paragraph tags which are not the problem. I understand why Jekyll does that to images. It makes sense to me. I just don't understand why it won't work when it's worked for me before when wrapping it in HTML tags.

Edited

<section class="photoset">

![Image of San Francisco bay bridge from beach](/images/san-francisco.jpeg)

</section>

<p><img src="/images/san-francisco.jpeg" alt="Image of San Francisco bay 
bridge from beach" /></p>

The above code I tried seeing if it would work without the section tags and it did work. So for some reason, it is the HTML tags that are preventing the markdown tags to work or something.

score 2 · Accepted Answer · answered Feb 21 '17 at 21:29

2

This is an intentional choice by Markdown itself and not a fault of Jekyll. From the inline HTML Markdown docs:

Note that Markdown formatting syntax is not processed within block-level HTML tags. E.g., you can’t use Markdown-style *emphasis* inside an HTML block.

If you want to add block-level HTML, its contents must be fully written in HTML as well.

answered Feb 21 '17 at 21:29

Ross Allen

43,772
14
97
95

Alright, so if I wanted to add an image for a post but surround it with a photoset class so it doesn't constrain to the paragraph stylings. I wonder how I could do it. – Benjamin Sanders Feb 21 '17 at 21:35
You might try `markdown="1"` as suggested in http://stackoverflow.com/a/35276926/368697. – Ross Allen Feb 21 '17 at 21:38
Oh that's even better. I didn't know about the markdown="1". – Benjamin Sanders Feb 21 '17 at 21:40

score 0 · Answer 2 · answered Feb 22 '17 at 13:50

0

You need to tell Kramdown to process kramdown syntax in block HTML tags

In _config.yml :

kramdown:
  # parse markdown inside block-level HTML tag
  parse_block_html: true

answered Feb 22 '17 at 13:50

David Jacquel

51,670
6
121
147

For Some Reason Markdown Images won't show surrounded by HTML

Edited

2 Answers2