Multiple Lines for Long Attribute Value in Jade / Pug

Question

How do we write a long attribute value over multiple lines in Jade / Pug?

SVG paths tend to be really long. We want to write an attribute value over multiple lines t

Answer 1

You can do it by closing the string at the line-break, adding a '+', and then opening a new string on the continuation line.

Here's an example:

path(d="M10 315 L 110 215 A 30 50 0 0 1 162.55 162.45 L 172.55" +
       " 152.45 A 30 50 -45 0 1 215.1 109.9 L 315 10",
     foo="etc",
     ...

Answer 2

This is an old question but here is a newer answer.

In my case I am using PUG in vue templates in single file components. So the following works for me.

<template lang='pug'>
  .day(:class=`{
    'disabled': isDisabled,
    'selected': isSameDay,
    'in-range': isInRange,
    'today': isToday,
    'weekend': isWeekend,
    'outside-month': isOutsideMonth }`,
    @click='selectDay'
  ) {{label}}
</template>

i.e. using string interpolation ` instead of ' or "

Answer 3

I have this same problem but in a knockoutjs context. I used the backslash like so. Previously:

div(data-bind="template: {name: 'ingredient-template', data: $data}")

Now:

div(data-bind="template: {\
    name: 'ingredient-template',\
    data: $data}")

Note: The backslash must be followed immediately by a newline. I'm not sure if this is the 'official' way, I just did it and it seems to work. One downside of this method is the strings then get rendered with the white space intact. So the above example gets rendered as:

<div data-bind="template: {                    name: 'ingredient-template',                    data: $data}">

This might make it unusable for your example.

Edit Thanks Jon. The var idea from your comment is probably better though still not ideal. Something like:

-var arg  = "M10 315 "
-arg += "L 110 215 "
-arg += "A 30 50 0 0 1 162.55 162.45 "
-arg += "L 172.55 152.45 "
-arg += "A 30 50 -45 0 1 215.1 109.9 "
-arg += "L 315 10"
h3 Arcs
  svg(width="320px", height="320px")
    path(d=arg, 
    stroke="black", fill="green", 
    stroke-width="2", fill-opacity="0.5")

Not sure that the extra characters are worth the reduction in line length.

Answer 4

I have been looking for an answer to this and I believe you can break jade attributes onto multiple lines by skipping the trailing commas.

Ex.

aside                                                                            
  a.my-link(                                                            
    href="https://foo.com"                                         
    data-widget-id="1234567abc")                                         
    | Tweets by @foobar

I found this commit message about it: https://github.com/visionmedia/jade/issues/65

Answer 5

I also had a string as attribute value. I am using react

 input(
   ...props
   label="Contrary to popular belief, Lorem Ipsum is simply random text. \
      It has roots in a piece of classical Latin literature from 45 BC, \ 
      making it over 2000 years old."
)

in your case...

path(d="M10 315 L 110 215 A 30 50 0 0 1 162.55 162.45 \
    L 172.55 152.45 A 30 50 -45 0 1 215.1 109.9 L 315 \
    10",

Note that there is a space before the backslash

Answer 6

Pug allows definition of js functions available within the template during rendering, so I have used this capability to define a function that removes unwanted white space from strings, then I apply that to a multiline attribute string to get rid of the unwanted white space in the generated html. Here is an example pug template:

-
    //- function to remove white space from strings, leaving a single space
    var rws_rex = /[\n\r\s\t]+/g
    function rws(ff){
        return ff.replace(rws_rex, ' ');
    }
span.clickable1( onclick=rws(` 
                      $('.selected').removeClass('selected'); 
                      $(this).addClass('selected'); 
                      SA_getPersonDetails('${psn1.personUID}'); 
                      return false; `)
             )  
    | Click for details

The result is

<span class="clickable1" onclick=" $('.selected').removeClass('selected'); $(this).addClass('selected'); SA_getPersonDetails('d1374ea2-2f35-4260-8332-abd7ec2d79b4'); return false; ">Click for details</span>

** Beware that this removes whitespace from inside any literal values in javascript code, so you would need to modify the regexp and function if you want to preserve those spaces. In my example above, if psn1.personUID contained multiple consecutive spaces, they would be reduced to a single space. But it works fine for most types of attribute.