search

vmg / redcarpet

The safe Markdown parser, reloaded.
MIT License
4.99k stars 527 forks source link

<hr> getting wrapped in <p> tags #593

Open benhutton opened 7 years ago

benhutton commented 7 years ago 
> Redcarpet::Markdown.new(Redcarpet::Render::HTML).render("<hr>")
 => "<p><hr></p>\n" 

> Redcarpet::Markdown.new(Redcarpet::Render::HTML).render("<hr></hr>")
 => "<hr></hr>\n" 

> Redcarpet::Markdown.new(Redcarpet::Render::HTML).render("<hr />")                                                                                                                 
 => "<p><hr /></p>\n" 

> Redcarpet::Markdown.new(Redcarpet::Render::HTML).render("<hr/>")                                                                                                                  
 => "<hr/>\n"

The second and fourth examples above work as I would expect. The first and third do not. Best I can tell, they are also valid ways to write an hr tag: http://www.w3schools.com/tags/tag_hr.asp

The first (<hr>) is the proper way to write it in html5 (https://www.w3.org/TR/html5/grouping-content.html#the-hr-element).

benhutton commented 7 years ago

And actually, it looks like, if you add in any attributes, you lose option 4, and so option 2 is the only valid one:

> Redcarpet::Markdown.new(Redcarpet::Render::HTML).render(%(<hr class="screen-width">))                                                                                             
 => "<p><hr class=\"screen-width\"></p>\n" 

> Redcarpet::Markdown.new(Redcarpet::Render::HTML).render(%(<hr class="screen-width"></hr>))
 => "<hr class=\"screen-width\"></hr>\n" 

> Redcarpet::Markdown.new(Redcarpet::Render::HTML).render(%(<hr class="screen-width" />))                                                                                           
 => "<p><hr class=\"screen-width\" /></p>\n" 

> Redcarpet::Markdown.new(Redcarpet::Render::HTML).render(%(<hr class="screen-width"/>))                                                                                            
 => "<p><hr class=\"screen-width\"/></p>\n"
benhutton commented 7 years ago

And unfortunately, that is invalid html5:

<!DOCTYPE html>
<html>
  <head><title>Test</title></head>
  <body>
    <hr></hr>
  </body>
</html>

Run that through https://validator.w3.org/#validate_by_input

image

phoet commented 5 years ago

i was looking through the documentation for quite a while now because i would like to render the markdown without any <p> wrapper tags, or have it render a different wrapper tag, or at least allow me to add a css class to that wrapper. it's kind of weird that i dont find anything related, sounds like a very basic thing.

swrobel commented 4 years ago

@benhutton @phoet did either of you get anywhere with this? Also trying to render without <p>.

phoet commented 4 years ago

nopse, i think ended up using a combination of a wrapper div and multiple css classes.

benhutton commented 4 years ago

no, unfortunately