search

jackyzha0 / quartz

🌱 a fast, batteries-included static-site generator that transforms Markdown content into fully functional websites
https://quartz.jzhao.xyz
MIT License
6.66k stars 2.44k forks source link

Nested Callouts don't render paragraph breaks #1302

Open Imoriarty opened 1 month ago

Imoriarty commented 1 month ago

Describe the bug

When a callout is nested inside another callout, paragraph breaks aren't respected.

To Reproduce

  1. Create a Callout
  2. Nest a Callout inside it
  3. Place text within the second callout.
  4. Hard return the text twice in the middle to create a seperate paragraph.
  5. In Obsidian & Markdown, the second paragraph will be created.
  6. In Quartz / Browser rendering, the second paragraph is lost.

Expected behavior

The second paragraph is rendered.

Screenshots and Source

Example Code:

> [!info]- Lorem Ipsum
> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur commodo mattis. Donec pretium fringilla ex in elementum. Aliquam convallis enim sed risus consequat tincidunt. In hac habitasse platea dictumst. Nulla et enim scelerisque, vestibulum purus sed, condimentum leo.
> 
> Praesent egestas ut enim quis vestibulum. Ut at molestie nibh. Proin interdum purus nisi, at aliquam nulla imperdiet in. Donec a ornare nunc, in sagittis est. Mauris vehicula pellentesque quam in interdum. Duis lobortis venenatis lorem vitae lacinia. Donec diam libero, bibendum sed eros iaculis, ullamcorper fermentum tellus.
> 
> > [!info]- Aliquam Erat
> > Aliquam erat volutpat. Sed neque ex, hendrerit a convallis id, aliquet eget nisl. Curabitur erat quam, mattis id lobortis at, ultrices sed turpis. Aenean ultricies suscipit risus vitae eleifend. Praesent luctus dictum nunc ut suscipit. Sed vitae eleifend massa. Etiam molestie ultrices felis sit amet eleifend. Proin dictum mollis massa, eu congue arcu lacinia nec. Nam lacus nisl, dictum vitae leo quis, vehicula malesuada libero. Duis placerat lacinia tincidunt.
> > 
> > Mauris vitae sodales magna. Vivamus bibendum nulla sit amet nibh placerat, in gravida sem malesuada. Nulla in velit eget est dignissim porttitor a quis urna. Nullam eleifend, erat id feugiat lacinia, leo turpis eleifend nisi, non lobortis nisi lectus vitae elit. Vivamus aliquet finibus diam a maximus. Praesent suscipit mi eget arcu laoreet consectetur. Cras ligula felis, placerat ut erat non, tristique sollicitudin mauris.

Obsidian

Obsidian_Render

Quartz 4.2.4 & Chrome

Browser_Render

Stack

Additional context

Rendered Html:

Note the second block of text isn't rendered into two \

spans.

<blockquote class="callout info is-collapsible" data-callout="info" data-callout-fold="" style="max-height: 494px;">
    <div class="callout-title">
        <div class="callout-icon"></div>
        <div class="callout-title-inner">
            <p>Lorem Ipsum </p>
        </div>
        <div class="fold-callout-icon"></div>
    </div>
    <div class="callout-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur commodo mattis. Donec pretium
            fringilla ex in elementum. Aliquam convallis enim sed risus consequat tincidunt. In hac habitasse platea
            dictumst. Nulla et enim scelerisque, vestibulum purus sed, condimentum leo.</p>
        <p>Praesent egestas ut enim quis vestibulum. Ut at molestie nibh. Proin interdum purus nisi, at aliquam nulla
            imperdiet in. Donec a ornare nunc, in sagittis est. Mauris vehicula pellentesque quam in interdum. Duis
            lobortis venenatis lorem vitae lacinia. Donec diam libero, bibendum sed eros iaculis, ullamcorper fermentum
            tellus.</p>
        <blockquote class="callout info is-collapsible" data-callout="info" data-callout-fold=""
            style="max-height: 204px;">
            <div class="callout-title">
                <div class="callout-icon"></div>
                <div class="callout-title-inner">
                    <p>Aliquam Erat </p>
                </div>
                <div class="fold-callout-icon"></div>
            </div>
            <div class="callout-content">
                <p>Mauris vitae sodales magna. Vivamus bibendum nulla sit amet nibh placerat, in gravida sem malesuada.
                    Nulla in velit eget est dignissim porttitor a quis urna. Nullam eleifend, erat id feugiat lacinia,
                    leo turpis eleifend nisi, non lobortis nisi lectus vitae elit. Vivamus aliquet finibus diam a
                    maximus. Praesent suscipit mi eget arcu laoreet consectetur. Cras ligula felis, placerat ut erat
                    non, tristique sollicitudin mauris.</p>
            </div>
        </blockquote>
    </div>
</blockquote>
MasssiveJuice08 commented 3 weeks ago

Could you try adding a line break after the first line of each callout? See the example below.

I found that adding a linebreak after the callout title made these render correctly, without altering how it rendered in Obsidian.

If you wish to have linebreaks in Quartz treated identically as in Obsidian, you can enable Quartz's HardLineBreaks plugin

Example:


> [!info]- Lorem Ipsum
>
> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur commodo mattis. Donec pretium fringilla ex in elementum. Aliquam convallis enim sed risus consequat tincidunt. In hac habitasse platea dictumst. Nulla et enim scelerisque, vestibulum purus sed, condimentum leo.
> 
> Praesent egestas ut enim quis vestibulum. Ut at molestie nibh. Proin interdum purus nisi, at aliquam nulla imperdiet in. Donec a ornare nunc, in sagittis est. Mauris vehicula pellentesque quam in interdum. Duis lobortis venenatis lorem vitae lacinia. Donec diam libero, bibendum sed eros iaculis, ullamcorper fermentum tellus.
> 
> > [!info]- Aliquam Erat
> >
> > Aliquam erat volutpat. Sed neque ex, hendrerit a convallis id, aliquet eget nisl. Curabitur erat quam, mattis id lobortis at, ultrices sed turpis. Aenean ultricies suscipit risus vitae eleifend. Praesent luctus dictum nunc ut suscipit. Sed vitae eleifend massa. Etiam molestie ultrices felis sit amet eleifend. Proin dictum mollis massa, eu congue arcu lacinia nec. Nam lacus nisl, dictum vitae leo quis, vehicula malesuada libero. Duis placerat lacinia tincidunt.
> > 
> > Mauris vitae sodales magna. Vivamus bibendum nulla sit amet nibh placerat, in gravida sem malesuada. Nulla in velit eget est dignissim porttitor a quis urna. Nullam eleifend, erat id feugiat lacinia, leo turpis eleifend nisi, non lobortis nisi lectus vitae elit. Vivamus aliquet finibus diam a maximus. Praesent suscipit mi eget arcu laoreet consectetur. Cras ligula felis, placerat ut erat non, tristique sollicitudin mauris.