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 to help with readability. For example, Mozilla's tutorial written in HTML is easy to read.

Any way to change this:

h3 Arcs
svg(width="320px", height="320px")
  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", 
    stroke="black", fill="green", 
    stroke-width="2", fill-opacity="0.5")

into something like this:

h3 Arcs
svg(width="320px", height="320px")
  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", 
    stroke="black", fill="green", 
    stroke-width="2", fill-opacity="0.5")

without triggering an "Unexpected token" error.

Answer 1

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 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 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