LeaVerou / md-block

A custom element for rendering stylable (light DOM) Markdown

Home Page:https://md-block.verou.me

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Block quotes don't work inside <md-block> contents

oznogon opened this issue · comments

<md-block> ignores Markdown block quote syntax inside its contents.

For example:

<md-block>
> Block quote
> doesn’t work
> as expected
</md-block>

renders in-browser as a <p> containing:

> Block quote > doesn’t work > as expected

(Probably HTML tag ambiguity with >?)

As a workaround, HTML tags work fine inside <md-block> contents:

<blockquote>This is fine</blockquote>

This also only appears to affect Markdown inside an <md-block> tag's contents. The same Markdown renders block quotes as expected when loaded remotely via the src attribute.

Codepen example: https://codepen.io/oznogon/pen/XWYVmLG?editors=1110

Thanks for the great bug report! This should be relatively easy to fix, though I will likely not have time to look into it until after next week.

Currently running into this as well.

@LeaVerou - if you don't have the time, could you point me to where this could be fixed? I could maybe take a stab at fixing it and submitting a PR.

This library is awesome otherwise.

Currently running into this as well.

@LeaVerou - if you don't have the time, could you point me to where this could be fixed? I could maybe take a stab at fixing it and submitting a PR.

This library is awesome otherwise.

I mean, it's a 300 loc codebase, it's not like it needs a ton of narrowing down, just experimentation 😁

My guesses are:
a) Somehow line breaks are mangled: not likely, otherwise you'd get a quote with the entire content, like:

Block quote > doesn’t work > as expected

b) the > are not recognized as > because they're encoded as &gt;, we need to recognize these and turn them back into > only when they come from HTML. I believe we do something similar for another feature. It could be as simple as .replace(/^&gt; /gm, "> ")

Thanks for being interested in looking into it! Happy to make you a maintainer after a couple of good merged PRs if you want, as I'm spread way too thin.

Awesome, the reason I asked for help is because I've never written javascript before :) Wasn't sure if the meat of the library was in the js includes at the top or if this handled everything. Will experiment and see if I can get a working PR! Thanks for all the help.

b) the > are not recognized as > because they're encoded as &gt;, we need to recognize these and turn them back into > only when they come from HTML. I believe we do something similar for another feature. It could be as simple as .replace(/^&gt; /gm, "> ")

This was correct. Tested locally, have a PR here