Rouge gem minimal example not showing formatting?

Question

I have followed the simple instructions in part A) of this answer.

The code can be seen in the browser, but it's not formatted as it's supposed to be.

When I view source, I can see that css classes are being generated, but it doesn't seem to change the appearance.

This is the html generated (I added the div's)

<div class="highlight">
<span class="k">def</span> <span class="nf">rouge_me</span>
  <span class="nb">puts</span> <span class="s1">'hey!'</span>
<span class="k">end</span><br><br>
</div>

What I've tried

1. This suggested wrapping everything in <div class="highlight"> ... </div> but that didn't change anything.
2. Common sense says if there's css classes being referenced in the html, but those css classes aren't defined anywhere, then they won't be applied. When I check my css, there are no classes defined (it's an extremely basic app with no styling). How can the app 'know' about the classes rouge provided? Does rouge provide these somehow?

Answer 1

The instructions that you reference here are not general instructions for formatting code with Rouge but rather an answer specific for the original question.

Specifically, you missed one sentence given there: ”The only thing you need besides the code above is the CSS rules, which you have already correctly included in the web page.“

Indeed, what you need is to include some CSS styles that will colour your formatted Rouge output. This can be done by rendering a chosen Rouge theme into your template / layout (into a <style> tag) or into an app/assets/stylesheets/rouge.css.erb file, e.g.

<%= Rouge::Themes::Base16.mode(:light).render(scope: '.highlight') %>

See the README for more examples and the list of themes.