How can I render inline JavaScript with Jade / Pug?

Asked 2/5, 2011 at 14:12 Answered 22/8, 2019 at 0:15

259

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?

Interphase answered 2/5, 2011 at 14:12 Comment(2)

You're missing a dot . after the (type='text/javascript') – Garrow 25/11, 2015 at 17:14

!!! 5 is deprecated, you must use doctype html – Skimmia 22/2, 2016 at 19:51

415

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

Dovecote answered 27/7, 2011 at 1:59 Comment(7)

Good solution, but it will produce only <script> instead of <script type="text/javascript">. – Nimmons 13/6, 2012 at 9:12

type="text/javascript" is the default value for the type field on <script> tags. You don't need to set it. – Jackelynjackeroo 18/12, 2012 at 21:3

What about multiline code? Is there a way to have proper code indentation in my Javascript when embedded in Jade this way? – Siple 14/2, 2013 at 7:50

Jade's policy changed, the inline script tag should now have a . appended. So script. followed by your indented block of JS. – Urinal 27/8, 2013 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. ;) – Urinal 27/8, 2013 at 20:28

That example is a script injection vulnerability. See github.com/visionmedia/jade/issues/1474 – Traci 25/3, 2014 at 17:53

Notably, all your server-side variables are still injectable in the script using #{var_name} – Allies 22/4, 2020 at 7:8

120

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>

Sosthena answered 13/10, 2013 at 21:20 Comment(2)

tag script with a dot after, in all javascript block is there any way that render it without newlines? – Skimmia 22/2, 2016 at 12:51

@Joaquinglez not that I know – Sosthena 22/2, 2016 at 17:56

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>

Position answered 5/4, 2014 at 11:48 Comment(2)

just script. would be fine. – Neodymium 14/8, 2016 at 8:11

Adding this will have no effect as it is the default value for inline scripts. – Eartha 3/8, 2023 at 6:29

No use script tag only.

Solution with |:

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

Or with a .:

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

Kingship answered 21/1, 2017 at 7:29 Comment(1)

I recommend .. Otherwise you would have to write | in each line. – Rubrician 5/3, 2017 at 10:39

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/

Eustache answered 2/5, 2011 at 17:0 Comment(6)

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 even has an example of what i'm trying to do, but it won't compile. I'm using the latest release too. – Interphase 2/5, 2011 at 17:24

So you're asking how to have multiple lines of Javascript code below one if? – Eustache 2/5, 2011 at 17:26

@Bluey same here, I've never gotten this to work. You should ask on the github issues. – Lobar 5/5, 2011 at 4: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. – Interphase 6/5, 2011 at 8:57

Jade 0.12.4 allows me to script() without prepending the JS with - below it. – Armillas 27/7, 2011 at 3: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. – Gwendagwendolen 11/5, 2015 at 9:1

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.

Chiropteran answered 30/5, 2011 at 13:16 Comment(0)

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

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

Arellano answered 22/8, 2019 at 0:15 Comment(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

Triplicity answered 26/5, 2013 at 10:54 Comment(2)

@aaaidan You're right. It's supported by Scalate (I'm using it here with no problems: github.com/cb372/phone-home/blob/master/src/main/webapp/WEB-INF/… ) but it looks like pure Jade doesn't support it, as it's not listed here: github.com/visionmedia/jade#features . That's a shame! – Triplicity 11/7, 2013 at 0:59

Yeah, would have been nice. As the top answer says, a script. works fine, and is legal !!! 5 – Romulus 11/7, 2013 at 10:23

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Jade template

Resulting rendered HTML in browser

Recommended topics

Hot tags