在HAML中嵌入pre / code标签中的代码

Question

我正在尝试为我正在编写的一些文档提供一些代码语法突出显示，我正在使用HAML和Highlight.js，这将适用于像这样的单行Ruby代码（虽然突出显示不是很好）：

   %pre
     %code
       \=link_to('link name on page', 'link destiation', :class => 'class-name', :icon => 'clock-o', :icon_last => true)

但是如果我尝试在pre和code标签中写一些CSS，就像这样：

  %pre
    %code
      ul {
        li {
          Background: red;
        }
      }

我得到了“非法嵌套：在纯文本中嵌套是非法的”。错误，由于CSS内容的末尾括号。

有没有人知道能够使用HAML在网页上编写代码示例（主要是SASS，Ruby，HAML，Coffeescript）的插件/方法？只是在一行上写下所有的CSS。我的目标是这种结果 - CSS-Tricks

Answer 1

您可以使用:preserve filter：

%pre
  %code
    :preserve
      ul {
        li {
          Background: red;
        }
      }

这可以防止缩进的代码被解析为Haml，并且还可以将换行转换为实体，以便代码按预期显示而不会有额外的空格。

如果您专门使用:ugly选项，则可以使用:plain filter代替。这不会将换行转换为实体，但会阻止解析为Haml。