Jade: Links inside a paragraph

Question

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

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

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.

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());

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

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 !

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!