Rouge CSS not applied to code

[clickworkorange]

I think I've got kramdown+rouge mostly working in my Rails 7 app; for example

Kramdown::Document.new(a_snippet_of_c, syntax_highlighter: "rouge", syntax_highlighter_opts: {line_numbers: true}) 

results in the following HTML output:

<div class="language-c highlighter-rouge"><div class="highlight"><pre class="highlight"><code><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
</pre><pre><span class="kt">int</span> <span class="nf">timerOneLength</span><span class="p">(</span><span class="kt">int</span> <span class="n">duty</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">if</span><span class="p">(</span><span class="n">TCCR1A</span> <span class="o">&amp;</span> <span class="n">_BV</span><span class="p">(</span><span class="n">WGM11</span><span class="p">))</span> <span class="p">{</span>
        <span class="k">if</span><span class="p">(</span><span class="n">TCCR1A</span> <span class="o">&amp;</span> <span class="n">_BV</span><span class="p">(</span><span class="n">WGM10</span><span class="p">))</span> <span class="p">{</span>
            <span class="k">return</span> <span class="n">duty</span><span class="o">&lt;&lt;</span><span class="mi">2</span><span class="p">;</span>
        <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
            <span class="k">return</span> <span class="n">duty</span><span class="o">&lt;&lt;</span><span class="mi">1</span><span class="p">;</span>
        <span class="p">}</span>
    <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
        <span class="k">return</span> <span class="n">duty</span><span class="p">;</span>
    <span class="p">}</span>
<span class="p">}</span>
</pre></code></pre></div></div>

But no CSS is being applied, and the output renders like this:

At first I thought I was simply missing the stylesheet, but looking in the Rouge code I see the themes are actually .rb files, which I assume need to be executed by the syntax highlighter to generate the CSS. Something is missing, and I'm sure it's something simple, but I've spent a good while searching for an answer and haven't been able to find anything relevant. Help appreciated!

My Gemfile has:

gem "kramdown", "~> 2.4.0"
gem "rouge", "~> 4.2.0"

[gettalong]

You need to generate the CSS yourself using the helper methods of Rouge and incorporate that into your HTML page, see e.g. https://github.com/rouge-ruby/rouge#library.

See https://github.com/gettalong/hexapdf-website/blob/master/src/assets/css/site.css#L360 for an example of how I did this with the HexaPDF website which also uses kramdown and rouge via the static website generator webgen.

[clickworkorange]

Aha! So it was something simple :) Thank you, I've now got the monokai CSS working, with the addition of

pre pre {
float: left;
}