在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过滤器:

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

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

如果您:ugly专门使用该选项,则可以使用:plain过滤器.这不会将换行符转换为实体,但会阻止解析为Haml.