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?

Ego

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.

Oversupply

Thanks very much. Do you know how to get the css into application.css? It is simply enough to run Rouge::Themes::Base16.mode(:light).render(scope: '.highlight') in the rails console and copy/paste the output into application.css? Apologies for how basic my understanding is – Ego

Please, see the updated answer. You can add a css.erb file, render the Rouge theme there, and include that file in your application.css. – Whimsey

I have another question here in case you can help – Ego