Embed Code in Pre/Code-Tags in HAML

Question

Ich versuche, Code-Syntax-Highlighting für einige Dokumente zu bekommen, die ich schreibe, verwende ich HAML und Highlight.js, die für eine einzelne Zeile von Ruby-Code wie diese funktionieren wird (obwohl die Markierung ist nicht gut):

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

Aber wenn ich versuche, und einige CSS in den pre und code Tags schreiben, wie folgt aus:

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

ich erhalte die „Illegal Verschachtelung: innerhalb Klartext Verschachtelung ist illegal." Fehler, aufgrund der Klammern am Ende des CSS-Zeugs.

Kennt jemand ein Plugin/Methode, um Code Beispiel (SASS, Ruby, HAML, Coffeescript hauptsächlich) auf der Webseite mit HAML zu schreiben? Kurz, nur das ganze CSS in einer Zeile zu schreiben. Ich bin mit dem Ziel für diese Art von Ergebnis - CSS-Tricks

Answer 1

Sie können die Verwendung :preserve filter:

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

Dies verhindert, dass der eingerückten Code als Haml analysiert werden, und wandelt auch Zeilenumbrüche in Entitäten, so dass der Code erscheint als Sie erwarten ohne zusätzliche Leerzeichen. Wenn Sie die Option :ugly ausschließlich verwenden, können Sie stattdessen die :plain filter verwenden. Dies wandelt keine Zeilenumbrüche in Entitäten um, verhindert jedoch das Parsing als Haml.