Mixing markdown with html for including image and empty line meaning

Question

When I put the following:

|![alt ]({attach}img/myimg.png "hint1")|

The pelican will generate image as expected. I wanted to use html to customise the aliment so I used:

<p align="center">
![alt ]({attach}img/myimg.png "hint1")
<br>
Figure 1.
</p>

but pelican produces only:

![alt ]({attach}img/myimg.png "hint1")
Figure 1.

However if I put the first table and the second html without empty separating line like this:

|![Attention architecture ]({attach}img/myimg.png "hint1")|
<p align="center">
![Attention architecture ]({attach}img/myimg.png "hint1")
<br>
Figure 1.
</p>

I got two images.. but... when I place empty line after the first and before the second image instruction like:

|![Attention architecture ]({attach}img/myimg.png "hint1")|

<p align="center">
![Attention architecture ]({attach}img/myimg.png "hint1")
<br>
Figure 1.
</p>

then only the first instruction includes image as expected and the second is not, and produces the same:

  ![alt ]({attach}img/myimg.png "hint1")
    Figure 1.

How to use the this HTML way of including image ?

Answer 1

In short, you can't use HTML to wrap Markdown. Markdown is not processed inside HTML. But you can use a Markdown extension to assign attributes to the generated HTML.

As the rules state:

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

Of course, you are wondering why it appears to work when you include a line of text on the line immediately before the <p> tag. The rules also explain:

The only restrictions are that block-level HTML elements — e.g. <div>, <table>, <pre>, <p>, etc. — must be separated from surrounding content by blank lines, and the start and end tags of the block should not be indented with tabs or spaces. Markdown is smart enough not to add extra (unwanted) <p> tags around HTML block-level tags.

In your case, the lack of a blank line causes the parser to not recognize the <p> tag as a raw HTML block. Therefore, it wraps the block in an extra <p> tag of its own, generating invalid HTML. Therefore, the styling hooks may not apply as you desire.

As it happens, Pelican includes support for Markdown extensions, including the Attribute List Extension, which is installed by default along with the Markdown parser. You just need to enable it (scroll down to Markdown). Add the following to your config file:

MARKDOWN = {
    'extension_configs': {
        'markdown.extensions.attr_list': {}
}

Then you can include attribute lists in your Markdown to assign various styling hooks.

![alt ]({attach}img/myimg.png "hint1")
<br>
Figure 1.
{: align=center }