trulia / hologram

A markdown based documentation system for style guides.
http://trulia.github.io/hologram
Other
2.16k stars 199 forks source link

Add slim support #146

Closed jmblog closed 10 years ago

jmblog commented 10 years ago

Sorry for sending pull requests often. I fixed spec files and gemspec to pass tests on Travis CI.

jmblog commented 10 years ago

Ah, I found the custom_markdown option in README. This option might be the correct solution if I want to support slim lang.

jdcantrell commented 10 years ago

Ah yes sorry for the slow response to this. I think that's the proper way to do this. We did add haml support directly to hologram but I feel like that wasn't the right choice. If you need help getting the custom markdown renderer going let me know!

jmblog commented 10 years ago

@jdcantrell Thanks for your comment!

stoplion commented 9 years ago

I would like to use Hologram with Slim. How do you set up a custom Markdown renderer with Slim? I've used the renderer in this PR but slim_example is spitting out string (see screenshot).

(example of button style in hologram) image // no syntax highlight either :(

We use html_example too. But don't need to render button twice. It is possible to skip rendering the for an example?

jmblog commented 9 years ago

@stoplion

Sorry for the late reply. Try the example below.

class YourCustomMarkdownRenderer < Redcarpet::Render::HTML

  def block_code(code, language)
    formatter = Rouge::Formatters::HTML.new(wrap: false)
    if language == 'slim_example'
      lexer = Rouge::Lexer.find('slim')
      lexer_html = Rouge::Lexer.find('html')
      '<div class="styleguide__example-output">' + render_html(code, 'slim') + '</div>' +
      '<div class="styleguide__highlighted-code--slim"><pre>' + formatter.format(lexer.lex(code)) + '</pre></div>' +
      '<div class="styleguide__highlighted-code--html"><pre>' + formatter.format(lexer_html.lex(render_html(code, 'slim'))) + '</pre></div>'
    elsif language == 'html_example'
      lexer = Rouge::Lexer.find('html')
      '<div class="styleguide__example-output">' + render_html(code, 'html') + '</div>' +
      '<div class="styleguide__highlighted-code--html"><pre>' + formatter.format(lexer.lex(code)) + '</pre></div>'
    else
      lexer = Rouge::Lexer.find_fancy('guess', code)
      '<div class="styleguide__highlighted-code"><pre>' + formatter.format(lexer.lex(code)) + '</pre></div>'
    end

  private
  def render_html(code, language)
    if language.include?('slim')
      safe_require('slim', language)
      return Slim::Template.new { code.strip }.render(template_rendering_scope, {})
    else
      code
    end
  end

  def template_rendering_scope
    Object.new
  end

  def safe_require(templating_library, language)
    begin
      require templating_library
    rescue LoadError
      raise "#{templating_library} must be present for you to use #{language}"
    end
  end
end

I guess this code's output is a little too much for you, but I hope it would be helpful to you.