How can I render inline JavaScript with Jade / Pug?

Question

I'm trying to get JavaScript to render on my page using Jade (http://jade-lang.com/)

My project is in NodeJS with Express, eveything is working correctly until I want to write some inline JavaScript in the head. Even taking the examples from the Jade docs I can't get it to work what am I missing?

Jade template

!!! 5
html(lang="en")
  head
    title "Test"
    script(type='text/javascript')
      if (10 == 10) {
        alert("working")
      }
  body

Resulting rendered HTML in browser

<!DOCTYPE html>
<html lang="en">
<head>
  <title>"Test"</title>
  <script type="text/javascript">
    <if>(10 == 10) {<alert working></alert></if>}
  </script>
</head>
<body>
</body>
</html>

Somethings definitely a miss here any ideas?

You're missing a dot `.` after the `(type='text/javascript')` — Warface, Nov 25 '15 at 17:14

score 411 · Answer 1 · edited Dec 27 '21 at 20:16

411

simply use a 'script' tag with a dot after.

script.
  var users = !{JSON.stringify(users).replace(/<\//g, "<\\/")}

https://github.com/pugjs/pug/blob/master/packages/pug/examples/dynamicscript.pug

edited Dec 27 '21 at 20:16

Kallzvx

594
7
23

answered Jul 27 '11 at 01:59

liangzan

6,804
4
29
28

Good solution, but it will produce only ` – Vojto Jun 13 '12 at 09:12
51

`type="text/javascript"` is the default value for the `type` field on ` – Adam Fabicki Dec 18 '12 at 21:03
What about multiline code? Is there a way to have proper code indentation in my Javascript when embedded in Jade this way? – missingfaktor Feb 14 '13 at 07:50
6

Jade's policy changed, the inline script tag should now have a `.` appended. So `script.` followed by your indented block of JS. – joeytwiddle Aug 27 '13 at 20:26
I don't know about indentation missingfaktor. Perhaps save your users some bandwidth by sending js-beautify, so you can prettify the code on the client-side. ;) – joeytwiddle Aug 27 '13 at 20:28
4

That example is a script injection vulnerability. See https://github.com/visionmedia/jade/issues/1474 – Jason Merrill Mar 25 '14 at 17:53
Notably, all your server-side variables are still injectable in the script using `#{var_name}` – happyhardik Apr 22 '20 at 07:08

Felipe Sabino · Answer 2 · 2017-01-02T11:46:45.257

118

The :javascript filter was removed in version 7.0

The docs says you should use a script tag now, followed by a . char and no preceding space.

Example:

script.
  if (usingJade)
    console.log('you are awesome')
  else
    console.log('use jade')

will be compiled to

<script>
  if (usingJade)
    console.log('you are awesome')
  else
    console.log('use jade')
</script>

edited Jan 02 '17 at 11:46

answered Oct 13 '13 at 21:20

Felipe Sabino

17,825
6
78
112

1

tag script with a dot after, in all javascript block is there any way that render it without newlines? – Joaquinglezsantos Feb 22 '16 at 12:51
@Joaquinglez not that I know – Felipe Sabino Feb 22 '16 at 17:56

score 62 · Answer 3 · edited May 04 '19 at 13:54

62

Use script tag with the type specified, simply include it before the dot:

script(type="text/javascript").
  if (10 == 10) {
    alert("working");
  }

This will compile to:

<script type="text/javascript">
  if (10 == 10) {
    alert("working");
  }
</script>

edited May 04 '19 at 13:54

Jean-François Fabre

137,073
23
153
219

answered Apr 05 '14 at 11:48

Stefan Jarina

723
5
6

2

just `script.` would be fine. – NoobTW Aug 14 '16 at 08:11
Adding this will have no effect as it is the default value for inline scripts. – Andrew Aug 03 '23 at 06:29

score 33 · Answer 4 · answered Jan 21 '17 at 07:29

33

No use script tag only.

Solution with |:

script
  | if (10 == 10) {
  |   alert("working")
  | }

Or with a .:

script.
  if (10 == 10) {
    alert("working")
  }

answered Jan 21 '17 at 07:29

Olivier C

899
1
13
14

8

I recommend `.`. Otherwise you would have to write `|` in each line. – Ilyas karim Mar 05 '17 at 10:39

JohnAllen · Answer 5 · 2011-05-05T21:11:27.213

3

THIRD VERSION OF MY ANSWER:

Here's a multiple line example of inline Jade Javascript. I don't think you can write it without using a -. This is a flash message example that I use in a partial. Hope this helps!

-if(typeof(info) !== 'undefined')
  -if (info)
    - if(info.length){
      ul
        -info.forEach(function(info){
          li= info
      -})
  -}

Is the code you're trying to get to compile the code in your question?

If so, you don't need two things: first, you don't need to declare that it's Javascript/a script, you can just started coding after typing -; second, after you type -if you don't need to type the { or } either. That's what makes Jade pretty sweet.

--------------ORIGINAL ANSWER BELOW ---------------

Try prepending if with -:

-if(10 == 10)
  //do whatever you want here as long as it's indented two spaces from
   the `-` above

There are also tons of Jade examples at:

https://github.com/visionmedia/jade/blob/master/examples/

edited May 05 '11 at 21:11

answered May 02 '11 at 17:00

JohnAllen

7,317
9
41
65

Thanks John have used that for the odd single line, however I can't see anyway of doing multiple lines without prepending it with the '-'. The Jade homepage ([link](http://jade-lang.com/) even has an example of what i'm trying to do, but it won't compile. I'm using the latest release too. – JMWhittaker May 02 '11 at 17:24
So you're asking how to have multiple lines of Javascript code below one if? – JohnAllen May 02 '11 at 17:26
@Bluey same here, I've never gotten this to work. You should ask on the github issues. – Mark May 05 '11 at 04:22
Mark, have now moved to using Sam Stephenson's Eco instead of Jade. I was only using jade as a quick UI for testing. – JMWhittaker May 06 '11 at 08:57
Jade 0.12.4 allows me to script() without prepending the JS with - below it. – Richard Holland Jul 27 '11 at 03:20
OP asked how to put inline javascript that would execute on the client side - This creates inline javascript that executes on the *server side* before returning the view to the user. – Dan May 11 '15 at 09:01

score 1 · Answer 6 · answered Aug 22 '19 at 00:15

1

script(nonce="some-nonce").
  console.log("test");

//- Workaround
<script nonce="some-nonce">console.log("test");</script>

answered Aug 22 '19 at 00:15

Ransomware0

427
3
10

score 1 · Answer 7 · answered May 30 '11 at 13:16

For multi-line content jade normally uses a "|", however:

Tags that accept only text such as script, style, and textarea do not need the leading | character

This said, i cannot reproduce the problem you are having. When i paste that code in a jade template, it produces the right output and prompts me with an alert on page-load.

score 0 · Answer 8 · answered May 26 '13 at 10:54

0

Use the :javascript filter. This will generate a script tag and escape the script contents as CDATA:

!!! 5
html(lang="en")
  head
    title "Test"
    :javascript
      if (10 == 10) {
        alert("working")
      }
  body

answered May 26 '13 at 10:54

Chris B

9,149
4
32
38

@aaaidan You're right. It's supported by Scalate (I'm using it here with no problems: https://github.com/cb372/phone-home/blob/master/src/main/webapp/WEB-INF/templates/views/recent-events.jade#L7 ) but it looks like pure Jade doesn't support it, as it's not listed here: https://github.com/visionmedia/jade#features . That's a shame! – Chris B Jul 11 '13 at 00:59
Yeah, would have been nice. As the top answer says, a `script.` works fine, and is legal `!!! 5` – aaaidan Jul 11 '13 at 10:23

How can I render inline JavaScript with Jade / Pug?

Jade template

Resulting rendered HTML in browser

8 Answers8

Linked