Syntax

Basics

Usually, template engines run in the markup context which can be exited from to implement some programming logic. In PHP, for example, you have the <?php and ?> tags to change the context.

In NHP, things are flipped and the default context is the programming one (JavaScript), while the markup context can be switched either explicitly or implicitly. You can experiment in the sandbox.

There are just a few things to remember:

1. Any line that begins with <, ignoring preceding whitespace, marks the beginning of the markup context. A line that ends with >, ignoring trailing whitespace, marks the end of the markup context.

   if (cond() === true) {
       <h1>Hey, the condition is true</h1>
   } 

   In the above code, the second line is considered markup and is added to the template buffer (the rendered markup).

2. To explicitly switch to the markup context, you use the special <echo> tag:

   if (true) {
       <echo>
           <p>
               multiline
               content
           </p>
       </echo> // js comment
   }

   The echo tag partly follows the first rule, meaning that its opening < must be the first symbol of the line. The reason for that is simplicity—if a line starts with <, you always know that the following is markup. However, unlike implicit markup, the echo context ends where the </echo> tag appears, regardless of where in the line it is. The following is always JavaScript, hence the "js comment" above.

3. Usually, markup is compiled down to valid JavaScript with template literals. This means you can use embedded expressions inside:

   var a = 5;
   <p>${ a } times ${ a } is ${ a * a }</p>

   While this gives us very useful functionality, it's a double-edged sword because of this caveat.

4. To output markup without exiting the JavaScript context, you could use the echo() function. This function is used internally by NHP when a template is compiled to valid JavaScript, meaning that this:

   <p>Timestamp: ${ Date.now() }</p>

   is the same as:

   echo(`<p>Timestamp: ${ Date.now() }</p>`);

Tips

Multiline output without echo tag

You could increase the readability of your code by extending the markup context with backslash \ instead of <echo>. Consider the following:

<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
    quis nostrud exercitation ullamco. But this is JavaScript context, though.
</div>

According to point #1 above, only the first and last lines are considered markup, which means that our text will be compiled as JavaScript. To avoid that without introducing an <echo> tag, we can simply put a backslash after the opening <div> tag:

<div>\
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
    and continues to the <strong>third</strong> line now. Next line terminates markup.
</div>

Now, according to point #1, the first line no longer terminates the markup because it doesn't end with >. The next line to end with that character is the last one, so the whole snippet is considered markup. The compiled code would look like:

echo(`<div>\
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
    and continues to the <strong>third</strong> line now. Next line terminates markup.
</div>`);

The backslash also escapes the newline after it, therefore the output will be:

<div>    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
    and continues to the <strong>third</strong> line now. Next line terminates markup.
</div>

Although this can be useful for small parts of markup, avoid using it on larger chunks because it'll make it harder to follow your code.

Highlighting

Currently, there is syntax highlighting only for Sublime Text. Check the plugin here.