Markdown blockquotes not rendering properly

Bugs
1

This appears to be an unresolved bug in Ghost (I searched and found a similar bug posted in 2018).

I’m using Ghost(pro).

According to the Markdown Guide, multi-paragraph blockquotes require a “>” character between lines. Please click on the link to see the syntax.

I’m attempting to do the same in the Editor using a Markdown card

But both in Preview and in Published modes, it does not render properly. Notice how there aren’t any spaces between paragraphs:

markdownbug
markdownbug1269×2355 275 KB

Note that I had to diagram this in Photoshop to show the input and output in one image since new users on this forum are not allowed to post more than one image. Yay!

This happens even though I included a bunch of “>” to show how this is broken.

I’m viewing this on a Mac running MacOS 12.3.1 and Safari 15.4.

I believe this is enough information for Ghost staff to identify the problem.

Can you please help?

Thanks.

2

It looks fine on my test site. Maybe, it’s your theme? Check that the <blockquote> contains <p> tags. If there’s no break, you’ll see <br>.

1 Like
3

I’m using the default Edition theme. Which theme did you successfully test this on?

After reading your reply here, I changed my theme to Journal, tested it, and it did not work. Despite many “>” characters, I see no line breaks in blockquotes in Markdown.

I then reverted by to Edition and tested again. Same problem.

I checked the source and my <blockquote> tags do contain <p> tags and no <br> tags.

4

In that case, markdown is correctly rendered in the card, but the paragraph inside the blockquote has no margin.

Maybe this is needed…


blockquote, p { margin-top: 1em; }
blockquote p:first-child { margin-top: 0; }
1 Like
5

It does not appear to be a margin issue to me.

It appears to be something quite simple.

There should be a <blockquote> block with text inside it and many <p> separating the text.

Instead, there is only one <p> no matter how many “>” characters I enter.

So there is no space between lines, when there should be, according to my input.

Why not? This is a bug in Ghost’s render of Markdown.

6

I checked this with the Casper theme. I found the paragraph break is missing in the “preview” and on the published pages, but is present when previewing the email template.

Looking at the HTML source, the <p> tag is there. This is a stylesheet issue.

In the case of Casper, global.css has reset margin: 0 on the blockquote tag, and screen.css has not set another value. Using the Chrome developer tools, I interactively tested removing margin: 0 on the blockquote, and that made the space re-appear.

The treatment for blockquotes should be a bit different through-- the margin on the top of the first paragraph and the bottom of the last paragraph is not needed. The suggested fix by @mjw looks about right to me.

I agree this looks like a bug with some of the default Ghost themes should be fixed.

7

What version of Ghost are you running, and do you have the latest version of the theme? I’ve checked with the latest versions of Casper and Headline, and they render correctly.

<section class="gh-content gh-canvas">
<blockquote>
<p>Para 1</p>
<p>Para 2.</p>
</blockquote>

</section>

So, I think this is a CSS issue.

8

Perhaps the problem is how Ghost is rendering the CSS, yes.

It is a Markdown to HTML rendering issue.

Ghost is not properly taking the input from Markdown (in this case, the extra > characters) and translating into <p>

Ghost customer support got back to me and offered a solution that works:

Instead of just adding >, I must add > &nbsp;

This adds the extra <p>

However if you look at the Markdown reference, it’s not supposed to work this way, so it’s a bug in Ghost, and this is the workaround.

1 Like
9

The > should always be followed by a single space, so Ghost is dealing with Markdown correctly.

10

It is not.

I tried adding a space just now. It does not work.

You must add &nbsp; explicitly for it to work.

11

I can assure you that this is not usually necessary; I certainly don’t need to do this.

12

Thanks.

In Edition theme, it’s the only way for it to work :frowning:

13

Were you, by chance, pasting content into the Markdown card? I asked because the default action, when pressing enter, is to add > on the next lines, and this persists when pressing enter again. Everything works fine with the Edition theme, too.

1 Like
14

Yes, I pasted content, but then I added > manually, and added several >, and added > followed by spaces.

It finally worked only when I added &nbsp; after >

Please check out the screenshot in the original post — you can see all the > that I added, without effect.

As I mentioned, I tested your solution of adding spaces after >, and it did not work for me.

15

It’s very puzzling, and I don’t doubt what you’re seeing. Maybe a character set issue? At least the workaround is sound.

16

Here’s how the Casper theme handles multiple paragraphs in a blockquote. There’s no space between the paragraphs

image

Here’s the CSS to add space between paragraphs without adding margin at the top or bottom:

blockquote p:first-child {
    margin-top: 0;
}
blockquote p {
    margin: 1.5rem;
}
blockquote p:last-child {
    margin-bottom: 0;
}

And how that result looks:

image

I submitted a pull request to propose this styling update in the Casper theme.

2 Likes