胭脂宝石最小示例未显示格式？

Question

我已按照this 答案的 A) 部分中的简单说明进行操作。

可以在浏览器中看到代码，但它的格式不符合预期。

当我查看源代码时，我可以看到正在生成 css 类，但它似乎并没有改变外观。

这是生成的html（我添加了div）

<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>

我尝试过的

1. This 建议将所有内容都包含在 <div class="highlight"> ... </div> 中，但这并没有改变任何东西。
2. 常识说如果html中引用了css类，但是那些css类没有在任何地方定义，那么它们就不会被应用。当我检查我的 css 时，没有定义任何类（这是一个非常基本的应用程序，没有样式）。应用程序如何“知道”胭脂提供的课程？胭脂会以某种方式提供这些吗？

Answer 1

您在此处引用的说明不是使用 Rouge 格式化代码的一般说明，而是针对原始问题的特定答案。

具体来说，你错过了那里给出的一句话：“除了上面的代码，你唯一需要的就是 CSS 规则，你已经正确地包含在网页中。”

确实，您需要包含一些 CSS 样式，这些样式将为您的格式化 Rouge 输出着色。这可以通过将选定的 Rouge 主题 呈现到您的模板/布局（到 <style> 标记）或 app/assets/stylesheets/rouge.css.erb 文件中来完成，例如

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

更多示例请参见the README 和list of themes。