Template Processing Examples

1. Jinja

Assuming the following data

{
   "my_string": "Test",
   "my_list": [1, 2, 3, 4, 5],
   "url": "https://my-image.jpg",
   "image-alt": "image-alt"
}

Before

    <div class="container">
      <p>My string: {{my_string}}</p>
      <p>Value from the list: {{my_list[3]}}</p>
      <p>Loop through the list:</p>
      <ul>
        {% for n in my_list %}
        <li>{{n}}</li>
        {% endfor %}
      </ul>
      <img src="{{ url }}" alt="{{ image-alt }}">
    </div>

After

    <div class="container">
      <p>My string: Test</p>
      <p>Value from the list: 4</p>
      <p>Loop through the list:</p>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
      <img src="https://my-image.jpg" alt="image-alt">
    </div>

2. EJS

Before (You can use the live playground example below here)

OK, so have fun! :D
-------------------
<%
    var fruits = ["Apple", "Pear", "Orange", "Lemon"]
      , random = " ".repeat(4).split("").map(x => Math.random())
      ;
%>

These fruits are amazing:
<% for(var i = 0; i < fruits.length; ++i) {%>
  - <%=fruits[i]%>s<% } %>

Let's see some random numbers:

<% random.forEach((c, i) => {
%> <%=c.toFixed(3) + ((i + 1) % 2 === 0 ? "\n": "") %><%});%>

After

OK, so have fun! :D
-------------------


These fruits are amazing:

  - Apples
  - Pears
  - Oranges
  - Lemons

Let's see some random numbers:

 0.045 0.118
 0.264 0.485