CODEWITHSUNDEEP
rubymarkdownredcarpet
bonafernando
bonafernando

Reputation: 1159

Ruby: how to generate HTML from Markdown like GitHub's or BitBucket's?

On the main page of every repository in GitHub or BitBucket it shows the Readme.md in a very pretty format.

Is there a way to make the same thing with ruby? I have already found some gems like Redcarpet, but it never looks pretty. I've followed this instructions for Redcarpet.

Edit: After I tried Github's markup ruby gem, the same thing is happening. What is shown is this: enter image description here And what I want is this: enter image description here

And I'm sure it's not only css missing, because after 3 backquotes (```) I write the syntax like json or bash and in the first image it is written.

Edit2:

This code here:

  renderer = Redcarpet::Render::HTML.new(prettify: true)
  markdown = Redcarpet::Markdown.new(renderer, fenced_code_blocks: true)
  html = markdown.render(source_text)
  '<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>'+html

Generated this: enter image description here

Upvotes: 7

Views: 7457

Answers (3)

Nakilon
Nakilon

Reputation: 35084

As @yoones said Github shares their way to do it but to be more precise they use the gem "commonmarker" for markdown. Though as far as I can tell this thing does not give the full formatted HTML file but only a piece that you insert into <body>. So you can do it like I did:

require "commonmarker"

puts <<~HEREDOC
  <!DOCTYPE html>
  <html>
    <head>
      <style>#{File.read "markdown.css"}</style>
    </head>
    <body class="markdown-body Box-body">
      #{CommonMarker.render_html ARGF.read, %i{ DEFAULT UNSAFE }, %i{ table }}
    </body>
  </html>
HEREDOC

Where did I get the markdown.css? I just stole the CSS files from an arbitrary Github page with README rendered and applied UNCSS to it -- resulted in a 26kb file, you can find it in the same repo I just linked.
Why the table and UNSAFE? I need this to render an index.html for Github Pages because their markdown renderer can't newlines within table cells, etc. so instead of asking it to render my README.md I make the index.html myself.

Upvotes: 1

Waylan
Waylan

Reputation: 42517

You need to enable a few nonstandard features.

Fenced code blocks

Fenced code blocks are nonstandard and are not enabled by default on most Markdown parsers (some older ones don't support them at all). According to Redcarpet's docs, you want to enable the fenced_code_blocks extension:

  • :fenced_code_blocks: parse fenced code blocks, PHP-Markdown style. Blocks delimited with 3 or more ~ or backticks will be considered as code, without the need to be indented. An optional language name may be added at the end of the opening fence for the code block.

Syntax Highlighting

Most Markdown parsers to not do syntax highlighting of code blocks. And those that do always do it as an option. Even then, you will still need to provide your own CSS styles to have the code blocks styled properly. As it turns out, Redcarpet does include support for a prettify option to the HTML renderer:

  • :prettify: add prettyprint classes to <code> tags for google-code-prettify.

You will need to get the Javascript and CSS from the google-code-prettify project to include in your pages.

Solution

In the end you'll need something like this:

renderer = Redcarpet::Render::HTML.new(prettify: true)
markdown = Redcarpet::Markdown.new(renderer, fenced_code_blocks: true)
html = markdown.render(source_text)

Upvotes: 2

yoones
yoones

Reputation: 2474

Github provides its own ruby gem to do so: https://github.com/github/markup. You just need to install the right dependencies and you're good to go.

Upvotes: 5

Related Questions