Layout Issues with div Tags in Markdown when Outputting to PDF

[karutt]

I want to apply my own layout, so I used div tags to write the following markdown. However, when I output this to PDF, I noticed that the layout was messed up.

<div class="note">

**Lorem** ipsum dolor sit amet consectetur adipisicing elit. Cum, autem?

</div>

Upon investigation, I found that the temporary HTML file created during PDF output outputs the body tag as follows.

<!-- p tag is coming out outside the div tag --> 
<div class="note"></div>
<p>
    <strong>Lorem</strong> ipsum dolor sit amet consectetur adipisicing
    elit. Cum, autem?
</p>

This plugin can output markdown to PDF and HTML. Strangely, when outputting normally in HTML, it differs from the temporary HTML code created for PDF.

<!-- p tag is correctly inside the div tag --> 
<div class="note">
    <p>
        <strong>Lorem</strong> ipsum dolor sit amet consectetur
        adipisicing elit. Cum, autem?
    </p>
</div>

I found a solution to this. Write the markdown as follows.

<div class="note">**Lorem** ipsum dolor sit amet consectetur adipisicing elit. Cum, autem?</div>

By not using line breaks inside the div tag, the p tag can be confirmed to be inside div.note in the html generated at the time of PDF output, resulting in the PDF having the layout as expected.

However, in vscode's markdown preview, if you don't use line breaks inside the div.note tag to display content, all markdown syntax within the content is invalidated, making the preview very hard to read and inconvenient.

Either way, this is a problem that should be solved.

By adding the following code to the script tag in template.html, you can solve the problem for now, although it is a workaround.

<script>
    window.onload = function () {
        document.querySelectorAll("body > div").forEach((div) => {
            if (div.innerHTML.trim() === "") {
                let nextElement = div.nextElementSibling;
                if (nextElement) {
                    div.appendChild(nextElement);
                }
            }
        });
    };
</script>