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   lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt     lt title gt  Test  lt  title gt     lt script type  text javascript  gt       lt if gt  10    10    lt alert working gt  lt  alert gt  lt  if gt      lt  script gt   lt  head gt   lt body gt   lt  body gt   lt  html gt    Somethings definitely a miss here any ideas

User · Answer

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   lt script gt    if  usingJade      console log  you are awesome     else     console log  use jade    lt  script gt

User · Answer

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

User · Answer

script nonce  some-nonce      console log  test       - Workaround  lt script nonce  some-nonce  gt console log  test    lt  script gt

User · Answer

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

User · Answer

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

User · Answer

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    lt script type  text javascript  gt    if  10    10        alert  working         lt  script gt

User · Answer

No use script tag only   Solution with     script     if  10    10          alert  working           Or with a     script    if  10    10        alert  working

User · Answer

simply use a  script  tag with a dot after   script    var users     JSON stringify users  replace   lt    g    lt          https   github com pugjs pug blob master examples dynamicscript pug

[node.js] How can I render inline JavaScript with Jade / Pug?

Examples related to node.js

Examples related to express

Examples related to pug