Jade: Links inside a paragraph

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.

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!

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

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}

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 !

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

As suggested by Daniel Baulig, used below with dynamic params

| <a href=!{aData.link}>link</a>

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

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.

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
| At Times Like These We Suggest Just Going:
a(ui-sref="app") HOME
|  

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 -> @ 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@myemail.com