Placing tags on both sides of HTML content with Pug

I’m a beginner web developer who is using Pug for a Node JS school assignment. I’ve been struggling trying to figure out how to place two tags on both sides of the content of their parent tag.

For Example, if I wanted to achieved something like this HTML:

<h2>
    <span>
        Span Content
    </span>
    H2 Content
    <span>
        Span Content
    </span>
</h2>

How would I get the first span tag to be above my H2 content using Pug?

Thanks for any help, I really appreciate it!

>Solution :

You would do

h2
  span Span Content
  | H2 Content
  span Span Content

Renders to:

<h2>
  <span>Span Content</span>
  H2 Content
  <span>Span Content</span>
</h2>

The pipe | indicates plain text for the rest of the line. If you need a large block, you can use ., for example:

p.
  all my text
  all my text
  all my text
  all my text
  all my text

Renders to:

<p>
  all my text
  all my text
  all my text
  all my text
  all my text
</p>