胭脂宝石最小示例不显示格式? [英] Rouge gem minimal example not showing formatting?

问题描述

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

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.

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

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

这是生成的html(我添加了div)

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>

我尝试过的

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

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?

推荐答案

此处引用的说明不是使用Rouge设置代码格式的一般说明，而是针对原始问题的解答.

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

具体来说，您错过了一个句子:除了上面的代码，您唯一需要的就是CSS规则，您已经正确地将其包含在网页中了."

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

实际上，您需要包括一些CSS样式，这些样式将为格式化的Rouge输出着色.这可以通过将选定的 Rouge主题呈现到模板/布局(<style>标签中)或app/assets/stylesheets/rouge.css.erb文件(例如

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') %>

有关更多示例和 查看全文