Is there a way to include html file or snippet directly in jade?

Question

I have a set of html files, mostly static, I would like to move to my node.js/express/jade project. What's the right way to include html file or snippet directly in jade? I don't want to translate existing html file to jade?

score 49 · Accepted Answer · answered Jul 27 '13 at 23:06

49

You should be able to simply include it within a jade template:

As mentioned include can be used to include other content such as html or css. By providing an extension, Jade will read that file in, apply any filter matching the file's extension, and insert that content into the output.

html
  // ...
  body
    // ...
    //- html files have no filter and are included verbatim
    include content.html

answered Jul 27 '13 at 23:06

Jonathan Lonowski

121,453
34
200
199

Does this mean you can import raw SVGs into Jade markup in this way? – j0e Sep 16 '14 at 18:25
1

I've still found that indentation on the included html file needs to be correctly formatted. Weird but true. – Michael Giovanni Pumo Mar 03 '16 at 12:28
1

How to use `include` with the file name in a variable? – Old Geezer Dec 11 '21 at 10:56

score 7 · Answer 2 · answered May 15 '15 at 03:01

7

Use :verbatim before the exact html code or snippet directly in jade.

doctype html
html(lang="en")
  :verbatim
    {% include head.html %}
  body
    :verbatim
    {{ content }}

  :verbatim
    {% include footer.html %}

Output

<!DOCTYPE html>
<html lang="en">{% include head.html %}
  <body>{{ content }}
  </body>{% include footer.html %}
</html>

answered May 15 '15 at 03:01

XY L

25,431
14
84
143

1

You are awesome to know about :verbatim. I can not find this in the jade-lang.com documentation, but it certainly works. It's the only reasonably maintainable way I've found to include multi-line code fragments and other pre-formatted text in Jade. – matty May 24 '15 at 06:15
1

What version does :verbatim apply to pls? Jade 1.11.0 doesnt understand that declaration – Owen Beresford Nov 18 '15 at 16:26
2

The new version of Jade, which was renamed to Pug, does not understand :verbatim. – nomad Dec 29 '16 at 17:01

score 4 · Answer 3 · answered Jul 09 '15 at 22:14

4

In my .jade file, I had to do something like this:

:verbatim
   !{editorBody}

.. where editorBody is provided via res.render() call :

var editorBody = '<p>Hello</p>';

return res.render('user/user_profile', {editorBody : editorBody});

answered Jul 09 '15 at 22:14

Gene Bo

11,284
8
90
137

3

What version does :verbatim apply to pls? Jade 1.11.0 doesnt understand that declaration – Owen Beresford Nov 18 '15 at 16:26

Is there a way to include html file or snippet directly in jade?

3 Answers3