128

I'm trying to author a few paragraphs with Jade, but finding it difficult when there are links inside a paragraph.

The best I can come up with, and I'm wondering if there's a way to do it with less markup:

p
  span.
   this is the start
   of the para.
  a(href="http://example.com") a link
  span.
    and this is the rest of
    the paragraph.
mahemoff
  • 44,526
  • 36
  • 160
  • 222

13 Answers13

126

As of jade 1.0 there's an easier way to deal with this, unfortunately I can't find it anywhere in the official documentation.

You can add inline elements with the following syntax:

#[a.someClass A Link!]

So, an example without going into multiple lines in a p, would be something like:

p: #[span this is the start of the para] #[a(href="http://example.com") a link] #[span and this is the rest of the paragraph]

You can also do nested inline elements:

p: This is a #[a(href="#") link with a nested #[span element]]
Clayton Gulick
  • 9,755
  • 2
  • 36
  • 26
  • 6
    This is documented here: http://jade-lang.com/reference/interpolation/ under "Tag Interpolation". – olan Apr 03 '15 at 13:42
103

You can use a markdown filter and use markdown (and allowed HTML) to write your paragraph.

:markdown
  this is the start of the para.
  [a link](http://example.com)
  and this is the rest of the paragraph.

Alternatively it seems like you can simply ouput HTML without any problems:

p
  | this is the start of the para.
  | <a href="http://example.com">a link</a>
  | and this is he rest of the paragraph

I wasn't aware of this myself and just tested it using the jade command line tool. It seems to work just fine.

EDIT: It seems it can actually be done entirely in Jade as follows:

p
  | this is the start of the para  
  a(href='http://example.com;) a link
  |  and this is the rest of the paragraph

Don't forget an extra space at the end of para (although you can't see it. and between | and. Otherwise it will look like this para.a linkand not para a link and

AdrieanKhisbe
  • 3,899
  • 8
  • 37
  • 45
Daniel Baulig
  • 10,739
  • 6
  • 44
  • 43
  • 1
    Thanks. Markdown is perfect for this. I found the NPM discount package didn't compile and there's an issue with NPM markdown (the pure JS) package with 0.5 (it's using regular expressions as functions, removed from Chrome). For anyone else reading, a solution is apparently to "npm install markdown-js", then rename it to "markdown". (As I found Jade doesn't look at "markdown-js".) Worked for me. – mahemoff Aug 09 '11 at 09:55
  • 9
    Looks like this might be addressed in the near future with interpolation, so that you can do `p This is a paragraph #[a(href="#") with a link] in it`. See https://github.com/visionmedia/jade/issues/936 – Will May 03 '13 at 16:42
  • 3
    If you use the third option be careful which editor you're using, I am using Sublime and it will remove the space at the end of the paragraph by default. Ultimately, I chose option 2 above because it was the least painful. – Ryan Eastabrook Jun 02 '14 at 22:53
  • Sublime only strips trailing spaces if you've told it to. I have, so I use an ` ` at the end of the first line, but I'm debating my approaches in the future. – Dave Newton Dec 01 '14 at 17:25
  • 1
    This has been solved in Jade 1.0, see http://stackoverflow.com/questions/6989653#answer-23923895 – Emilien Feb 16 '15 at 11:35
49

Another way to do it:

p
  | this is the start of the para
  a(href="http://example.com") a link
  | 
  | this is the rest of the paragraph.
Matthew Lock
  • 13,144
  • 12
  • 92
  • 130
pera
  • 858
  • 12
  • 16
3

Another completely different approach, would be to create a filter, which has first stab at replacing links, and then renders with jade second

h1 happy days
:inline
  p this can have [a link](http://going-nowhere.com/) in it

Renders:

<h1>happy days</h1><p>this can have <a href='http://going-nowhere.com/'>a link</a> in it</p>

Full working example: index.js (run with nodejs)

var f, jade;

jade = require('jade');

jade.filters.inline = function(txt) {
  // simple regex to match links, might be better as parser, but seems overkill
  txt = txt.replace(/\[(.+?)\]\((.+?)\)/, "<a href='$2'>$1</a>");
  return jade.compile(txt)();
};

jadestring = ""+ // p.s. I hate javascript's non-handling of multiline strings
  "h1 happy days\n"+
  ":inline\n"+
  "  p this can have [a link](http://going-nowhere.com/) in it"


f = jade.compile(jadestring);

console.log(f());

A more general solution would render mini sub-blocks of jade in a unique block (maybe identified by something like ${jade goes here}), so...

p some paragraph text where ${a(href="wherever.htm") the link} is embedded

This could be implemented in exactly the same way as above.

Working example of general solution:

var f, jade;

jade = require('jade');

jade.filters.inline = function(txt) {
  txt = txt.replace(/\${(.+?)}/, function(a,b){
    return jade.compile(b)();
  });
  return jade.compile(txt)();
};

jadestring = ""+ // p.s. I hate javascript's non-handling of multiline strings
  "h1 happy days\n"+
  ":inline\n"+
  "  p this can have ${a(href='http://going-nowhere.com/') a link} in it"


f = jade.compile(jadestring);

console.log(f());
Billy Moon
  • 57,113
  • 24
  • 136
  • 237
3

If your links come from a data source you can use:

  ul
    each val in results
      p
        | blah blah 
        a(href="#{val.url}") #{val.name}
        |  more blah

See interpolation

P.Brian.Mackey
  • 43,228
  • 68
  • 238
  • 348
2

Edit: This feature was implemented and issue closed, see answer above.

I've posted an issue to get this feature added into Jade

https://github.com/visionmedia/jade/issues/936

Haven't had time to implement it though, more +1s may help !

jpillora
  • 5,194
  • 2
  • 44
  • 56
  • 3
    Thanks a lot @jpillora for creating that issue, which ended in this inlining feature being implemented. – Emilien Feb 16 '15 at 11:31
1

This is the best I can come up with

-var a = function(href,text){ return "<a href='"+href+"'>"+text+"</a>" }

p this is an !{a("http://example.com/","embedded link")} in the paragraph

Renders...

<p>this is an <a href='http://example.com/'>embedded link</a> in the paragraph</p>

Works ok, but feels like a bit of a hack - there really should be a syntax for this!

Billy Moon
  • 57,113
  • 24
  • 136
  • 237
0

I did not realize that jade requires a line per tag. I thought we can save space. Much better if this can be understood ul>li>a[class="emmet"]{text}

paoloumali
  • 65
  • 2
  • 6
0

I had to add a period directly behind a link, like this:

This is your test [link].

I solved it like this:

label(for="eula").lbl.lbl-checkbox.lbl-eula #{i18n.signup.text.accept_eula}
    | <a href="#about/termsandconditions" class=".lnk.lnk-eula">#{i18n.signup.links.eula}</a>.
Rick Pastoor
  • 3,625
  • 1
  • 21
  • 24
0

As suggested by Daniel Baulig, used below with dynamic params 

| <a href=!{aData.link}>link</a>
Shams
  • 3,637
  • 5
  • 31
  • 49
0

Turns out there is (now at least) a perfectly simple option

p Convert a .fit file using <a href="http://connect.garmin.com/"> Garmin Connect's</a> export functionality.
Simon H
  • 20,332
  • 14
  • 71
  • 128
  • 2
    Kind of defeats the purpose of using a preprocessor if you have to dip back into html at the first sign of trouble. – superluminary Feb 05 '15 at 11:06
  • 2
    Agreed but using a pipe and new line every time you need to add an inline tag us hardly ideal. In new to jade but this seems major omission – Simon H Feb 05 '15 at 11:13
  • 2
    Me too, I've come over from haml where a tag is prefixed with a %. Jade is much prettier though. – superluminary Feb 05 '15 at 11:26
0
p
    | At Times Like These We Suggest Just Going:
    a(ui-sref="app") HOME
    | &nbsp;
Dr Manhattan
  • 13,537
  • 6
  • 45
  • 41
-1

Most simplest thing ever ;) but I was struggling with this myself for a few seconds. Anywho, you need to use an HTML entity for the "@" sign -> &#64; If you want to in include a link, let's say your/some email address use this:

p
    a(href="mailto:me@myemail.com" target="_top") me&#64;myemail.com
pit tanenbaum
  • 1
  • 1