title: How do I implement Rouge syntax highlighting in Rails?
body: <p>There are a bunch of tutorials floating around, but they seem to be incomplete or not fully current or don't fully work for me.</p>
  
  <p>This is what I have done.</p>
  
  <p>Gemfile:</p>
  
  <pre><code>gem 'rouge'
  gem 'redcarpet'
  </code></pre>
  
  <p>Then I created a <code>config/initializer/rouge.rb</code>:</p>
  
  <pre><code>require 'rouge/plugins/redcarpet'
  </code></pre>
  
  <p>Then I created a file called <code>app/assets/stylesheets/rouge.css.erb</code></p>
  
  <pre><code>&lt;%= Rouge::Themes::Github.render(:scope =&gt; '.highlight') %&gt;
  </code></pre>
  
  <p>Then in my <code>app/helpers/application_helper.rb</code>, I added this:</p>
  
  <pre><code>module ApplicationHelper
    class HTML &lt; Redcarpet::Render::HTML
      include Rouge::Plugins::Redcarpet
  
      def block_code(code, language)
        Rouge.highlight(code, language || 'text', 'html')
      end
    end
  
    def markdown(text)
      render_options = {
        filter_html: true,
        hard_wrap: true,
        link_attributes: { rel: 'nofollow' }
      }
      renderer = HTML.new(render_options)
  
      extensions = {
        autolink: true,
        fenced_code_blocks: true,
        lax_spacing: true,
        no_intra_emphasis: true,
        strikethrough: true,
        superscript: true
      }
      Redcarpet::Markdown.new(renderer, extensions).render(text).html_safe
    end
  end
  </code></pre>
  
  <p>Then in my <code>show.html.erb</code>, I did this:</p>
  
  <pre><code>&lt;%= markdown(@question.body) %&gt;
  </code></pre>
  
  <p>But that literally does not work. It outputs my <code>ruby</code> code snippet like this:</p>
  
  <p><a href="https://i.stack.imgur.com/nKJd9.png" rel="noreferrer"><img src="https://i.stack.imgur.com/nKJd9.png" alt="unformatted-ruby-snippet"></a></p>
  
  <p>How do I get this snippet of code to be formatted like Github? Or even just the first step being to be formatted any at all, then how do I tweak the formatting?</p>
  
  <p>I don't see a stylesheet included in the source of the page, so I don't know which styles to tweak for what I want.</p>
  
  <p><strong>Edit 1</strong></p>
  
  <p>Or even when I do this:</p>
  
  <pre><code>            &lt;div class="highlight"&gt;
                &lt;%= @question.test_suite %&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>It renders like this:</p>
  
  <p><a href="https://i.stack.imgur.com/qQ49F.png" rel="noreferrer"><img src="https://i.stack.imgur.com/qQ49F.png" alt="another-ruby-snippet"></a></p>
  
  <p><strong>Edit 2</strong></p>
  
  <p>I attempted BoraMa's suggestion and I got output that looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/mo005.png" rel="noreferrer"><img src="https://i.stack.imgur.com/mo005.png" alt="enter image description here"></a></p>
  
  <p><strong>Edit 3</strong></p>
  
  <p>I made a modification to BoraMa's answer as follows.</p>
  
  <p>In my <code>block_code</code> method, I call highlight as follows:</p>
  
  <pre><code>Rouge.highlight(code, 'ruby', 'html')
  </code></pre>
  
  <p>Then in my view I do this:</p>
  
  <pre><code>&lt;%= raw rouge_markdown(&lt;&lt;-'EOF'
                  def rouge_me
                    puts "this is a #{'test'} for rouge"
                  end
                  EOF
                  ) %&gt;
  </code></pre>
  
  <p>Then that produces this:</p>
  
  <p><a href="https://i.stack.imgur.com/HngU7.png" rel="noreferrer"><img src="https://i.stack.imgur.com/HngU7.png" alt="enter image description here"></a></p>
  
  <p>Note I am referring to the code snippet at the bottom of the screenshot.</p>
  
  <p>However, the text at the top is generated with this:</p>
  
  <pre><code>          &lt;pre class="highlight ruby"&gt;
              &lt;%= rouge_markdown(@question.body) %&gt;
            &lt;/pre&gt;
  </code></pre>
  
  <p>And it is rendered as is shown in the screenshot.</p>
  
  <p><strong>Edit 4</strong></p>
  
  <p>After removing the <code>&lt;div class="highlight"&gt;</code>, I see this:</p>
  
  <p><a href="https://i.stack.imgur.com/ehnir.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ehnir.png" alt="enter image description here"></a></p>
  
  <p>Aka....nothing is being rendered at all.</p>
  
  <p>Once I add <code>raw</code> to my view...aka <code>&lt;%= raw rouge_markdown(@question.body) %&gt;</code></p>
  
  <p>The view renders this:</p>
  
  <p><a href="https://i.stack.imgur.com/FrwG1.png" rel="noreferrer"><img src="https://i.stack.imgur.com/FrwG1.png" alt="enter image description here"></a></p>
  
  <p><strong>Edit 5</strong></p>
  
  <p>Here is the content for various <code>@question</code> objects:</p>
  
  <pre><code>[1] pry(#&lt;#&lt;Class:0x007fc041b97ce8&gt;&gt;)&gt; @question.body
  =&gt; "5.times do\r\n   puts \"Herro Rerl!\"\r\nend"
  [1] pry(#&lt;#&lt;Class:0x007fc041b97ce8&gt;&gt;)&gt; @question.body
  =&gt; "puts \"Hello World version 9\"\r\nputs \"This comes after version 8.\"\r\nputs \"This comes after version 7.\"\r\nputs \"This comes after version 6.\"\r\nputs \"This comes after version 5.\"\r\nputs \"This comes after version 4.\"\r\nputs \"This comes after version 3.\"\r\nputs \"This comes after version 2.\"\r\nputs \"This definitely comes after version 1.\""
  
  [1] pry(#&lt;#&lt;Class:0x007fc041b97ce8&gt;&gt;)&gt; @question.body
  =&gt; "def convert_relation(invited_gender, relation)\r\n case invited_gender\r\n \twhen \"male\"\r\n  \tcase relation\r\n      when \"daughter\", \"son\" then \"dad\"\r\n      when \"mom\", \"dad\" then \"son\"\r\n      when \"grandfather\", \"grandmother\" then \"grandson\"\r\n      when \"sister\", \"brother\" then \"brother\"\r\n      when \"wife\" then \"husband\"\r\n      when \"husband\" then \"husband\"\r\n    end\r\n  when \"female\"\r\n  \tcase relation\r\n      when \"daughter\", \"son\" then \"mom\"\r\n      when \"mom\", \"dad\" then \"daughter\"\r\n      when \"grandfather\", \"grandmother\" then \"granddaughter\"\r\n      when \"sister\", \"brother\" then \"sister\"\r\n      when \"wife\" then \"wife\"\r\n      when \"husband\" then \"wife\"\r\n    end\r\n  end\r\nend\r\n\r\nputs convert_relation(\"male\", \"wife\")"
  </code></pre>