Jade: A clean, whitespace-sensitive template language for writing HTML

Jeroen Ooms

2021-04-16

Jade is a high performance template engine heavily influenced by Haml. The rjade package interfaces to the JavaScript library using V8, the embedded JavaScript engine for R. Below an example of a Jade template, taken from the jade homepage. This example template includes one variable called youAreUsingJade.

doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) {
         bar(1 + 5)
      }
  body
    h1 Jade - node template engine
    #container.col
      if youAreUsingJade
        p You are amazing
      else
        p Get on it!
      p.
        Jade is a terse and simple
        templating language with a
        strong focus on performance
        and powerful features.

Converting a template to HTML text involves two steps. The first step compiles the template with some formatting options into a closure. The binding for this is implemented in jade_compile.

# Compile a Jade template in R
text <- readLines(system.file("examples/test.jade", package = "rjade"))
tpl <- jade_compile(text, pretty = TRUE)

The second step calls the closure with optionally some local variables to render the output to HTML.

# Render the template
tpl()
<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <script type="text/javascript">
      if (foo) {
         bar(1 + 5)
      }
    </script>
  </head>
  <body>
    <h1>Jade - node template engine</h1>
    <div id="container" class="col">
      <p>Get on it!</p>
      <p>
        Jade is a terse and simple
        templating language with a
        strong focus on performance
        and powerful features.
      </p>
    </div>
  </body>
</html> 

Note how the HTML output changes when setting local variables:

tpl(youAreUsingJade = TRUE)
<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <script type="text/javascript">
      if (foo) {
         bar(1 + 5)
      }
    </script>
  </head>
  <body>
    <h1>Jade - node template engine</h1>
    <div id="container" class="col">
      <p>You are amazing</p>
      <p>
        Jade is a terse and simple
        templating language with a
        strong focus on performance
        and powerful features.
      </p>
    </div>
  </body>
</html>