0

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?
stevec
  • 41,291
  • 27
  • 223
  • 311

1 Answers1

3

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.

Matouš Borák
  • 15,606
  • 1
  • 42
  • 53
  • 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 – stevec Aug 22 '19 at 14:18
  • 1
    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`. – Matouš Borák Aug 22 '19 at 14:20
  • I have another question [here](https://stackoverflow.com/questions/57612022/rouge-gem-not-showing-line-breaks-in-formatted-code) in case you can help – stevec Aug 22 '19 at 14:51