Interpolation

Consider the placement of the following template’s locals: , author, and theGreat.

  1. <h1>On Dogs: Man's Best Friend</h1>
  2. <p>Written with love by enlore</p>
  3. <p>This will be safe: &lt;span&gt;escape!&lt;/span&gt;</p>

title follows the basic pattern for evaluating a template local, but the code in between #{ and } is evaluated, escaped, and the result buffered into the output of the template being rendered.

This can be any valid Javascript expression, so you can do whatever feels good.

  1. - var msg = "not my inside voice";
  2. p This is #{msg.toUpperCase()}
    1. <p>No escaping for }!</p>

    If you need to include a verbatim #{, you can either escape it, or use interpolation. (So meta!)

    1. p Escaping works with \#{interpolation}
    2. p Interpolation works with #{'#{interpolation}'} too!
    1. <p>Escaping works with #{interpolation}</p>
    2. <p>Interpolation works with #{interpolation} too!</p>

    You don’t have to play it safe. You can buffer unescaped values into your templates, too.

    1. <div class="quote">
    2.   <p>Joel: <em>Some of the girls are wearing my mother's clothing.</em></p>
    3. </div>
    Caution

    Keep in mind that buffering unescaped content into your templates can be mighty risky if that content comes fresh from your users. Never trust user input!

    1. p.
    2.   This is a very long and boring paragraph that spans multiple lines.
    3.   #[em ignored].
    4. p.
    5.   And here's an example of an interpolated tag with an attribute:
    6.   #[q(lang="es") ¡Hola Mundo!]
    1. <p>This is a very long and boring paragraph that spans multiple lines. Suddenly there is a <strong>strongly worded phrase</strong> that cannot be
    2.   <em>ignored</em>.</p>
    3. <p>And here's an example of an interpolated tag with an attribute:
    4.   <q lang="es">¡Hola Mundo!</q></p>

    You could accomplish the same thing by writing an HTML tag inline with your Pug…but then, what’s the point of writing the Pug? Wrap an inline Pug tag declaration in #[ and ], and it’ll be evaluated and buffered into the content of its containing tag.

    The tag interpolation syntax is especially useful for inline tags, where whitespace before and after the tag is significant.

    By default, however, Pug removes all spaces before and after tags. Check out the following example:

    1. <p>If I don't write the paragraph with tag interpolation, tags like<strong>strong</strong>and<em>em</em>might produce unexpected results.</p>