haml - 在 HAML 的预/代码标签中嵌入代码

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 中写一些 CSS和 code标签，像这样:

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