slim - text not recognised as a tag

Question

A new to Slim question

I expected the following Slim template

div class="header"
h2  slim head 
p a test example of 
    span Slim 
span a new line with span
p 
    | expected a test example of <span>Slim</span>

to generate:

<div class="header">
<h2> slim head </h2>
    <p>a test example of <span>Slim</span></p>
    <span>a new line with span</span>
    <p>expected a test example of <span>Slim</span></p>
</div>

But instead the span tag was not recognised and it generated :

<div class="header">
  <h2> slim head </h2>
  <p>a test example of 
         span Slim </p>
  <span>a new line with span</span>
  <p>expected a test example of <span>Slim</span></p>
</div>

Why was the span treated as text and not a tag?

Thanks

Answer 1

Slim treats your span as text because you started the actual content for the paragraph in the same line. You should nest the text with a pipe (|) and add the span after it like so:

div class="header"
h2  slim head 
p 
    | a test example of 
    span Slim 
span a new line with span
p 
    | expected a test example of <span>Slim</span>

This should correctly compile to this:

<div class="header">
  <h2> slim head </h2>
  <p>a test example of <span> Slim</span></p>
  <span>a new line with span</span>
  <p>expected a test example of <span>Slim</span></p>
</div>