2014-04-11 13 views
5

Sto cercando di ottenere dell'evidenziazione della sintassi del codice per alcuni documenti che sto scrivendo, sto usando HAML e Highlight.js che funzionerà per una singola riga di codice Ruby come questa (sebbene l'evidenziazione non è grande):Codice incorporato nei tag pre/code in HAML

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

Ma se provo e scrivo un po 'di CSS nei pre e code tag, in questo modo:

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

ottengo il "nesting illegale: nidificazione all'interno di testo normale è illegale. " errore, a causa delle parentesi alla fine della roba CSS.

Qualcuno sa di un plug-in/metodo per poter scrivere esempi di codice (SASS, Ruby, HAML, Coffeescript principalmente) nella pagina Web utilizzando HAML? A corto di solo scrivere tutti i CSS su una riga. Sto puntando per questo tipo di risultato - CSS-Tricks

risposta

11

È possibile utilizzare il :preserve filter:

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

questo modo si evita il codice rientrato essere analizzato come Haml, e converte anche a capo in entità in modo che il codice sia come ti aspetti senza spazi bianchi extra.

Se si utilizza l'opzione :ugly esclusivamente, è possibile utilizzare lo :plain filter. Questo non converte le newline in entità ma impedisce l'analisi come Haml.

+0

Grazie a questo risponde alla mia domanda, piuttosto che iniziare una nuova domanda: sai come potrei ottenere questo risultato in formato HTML anziché in testo normale? highlight.js non evidenzia i tag perché sono testo normale. –