'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!

htmlpug


Solution 1:[1]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 sean-7777

Related Questions