search

markdown-it / markdown-it-container

Fenced container plugin for markdown-it markdown parser
MIT License
496 stars 74 forks source link

Paragraph **p** surround image #19

Closed NickNaso closed 6 years ago

NickNaso commented 6 years ago

Hi everyone, below I report my configurations:

// ...
const markdownItAttrs = require('markdown-it-attrs')
const markDownItContainer = require('markdown-it-container')
var blockImagePlugin = require("markdown-it-block-image")
const Markdown = require('markdown-it')({
    html: true,
    breaks: true,
    typographer: true,
    linkify: true
})
.use(markdownItAttrs)
.use(blockImagePlugin)
.use(markDownItContainer, 'htmlblock')
// ...

When I render my web page:

<!DOCTYPE html>
<html>
    <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
    {% markdown %}
    ::: htmlblock {.red} 
    ![img](img.png)
    ::: 
    {% endmarkdown %}
    </body>
</html>

I get that image will be surrounded by tag p 

<html>
<head>
</head>
<body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
    <div class="htmlblock">
        <p>
             <img src="img.png" alt="img">
      </p>
    </div>
</body>
</html>

Is this normal or I did something wrong? Is there a method to avoid this behavior?

Thanks a lot.

puzrin commented 6 years ago

That's normal. This module is a container to wrap internal markdown content. If you try content standalone, you will get the same result, with <p>.

If you don't need <p>, you should not use markdown - use html of modified fenced block.

xgz123 commented 6 years ago

div seems to be a better option ?