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

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

Click for details

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