ruby-on-railsrubymarkdownruby-on-rails-5redcarpet

Markdown rendered with Redcarpet missing dashes for lists and new lines between sections


I have some markdown that I generated which looks like this in text form:

"### We're looking for someone with…\r\n\r\n- Significant Rails experience\r\n- Good communication skills (recommended)\r\n\r\n\r\n### You should be located near:\r\n\r\n- Berlin\r\n- San Francisco\r\n- Toronto\r\n"

In ApplicationHelper.rb, I have the following:

module ApplicationHelper
    def markdown(content)
      return '' if content.blank?

      @options = {
           autolink: true,
           space_after_headers: true,
           underline: true,
           link_attributes: {rel: 'nofollow', target: "_blank"}
       }

      markdown = Redcarpet::Markdown.new(Redcarpet::Render::HTML, @options)

      markdown.render(content).html_safe
    end
end

No matter how many line breaks I add between each of the H3 sections (in this case it's 3 new lines), the two sections hug right up next to each other instead of respecting the 3 \ns in the text.

Also, there's no - or * character before each item in a list.

enter image description here

I looked on the Redcarpet docs and I don't see anything that I can enable to respect the new lines and the list items. Whitelisting every single html tag that markdown compiles to doesn't seem like the right solution.

Any help would be appreciated. Thanks!


Solution

  • The output of Redcarpet is HTML. How it appears in the browser depends on how you have styled this HTML, and is more or less independent of the spacing in the source markdown.

    The markdown you give produces the following HTML:

    <h3>We&#39;re looking for someone with…</h3>
    
    <ul>
    <li>Significant Rails experience</li>
    <li>Good communication skills (recommended)</li>
    </ul>
    
    <h3>You should be located near:</h3>
    
    <ul>
    <li>Berlin</li>
    <li>San Francisco</li>
    <li>Toronto</li>
    </ul>
    

    The exact same HTML is generated no matter how many newlines you have between the list and the header.

    How much space appears when this is rendered depends on your CSS. For example you might want to add a margin-top or padding-top to the h3 elements to create more space.

    The same is true for the list icons, you probably have list-style set to none, which is why nothing is appearing for the bullets.