Showdown: Way to add target in links

Created on 19 Mar 2016  路  5Comments  路  Source: showdownjs/showdown

I took a look in the web and I found something about.

Okay, we can add the pure HTML inside the markdown, but would me amazing, and better a way to do it easily like:

[link](url){:target="_blank"}
duplicate enhancement

Most helpful comment

Adding extra syntax to the link element is not a good idea as it diverts from the markdown spec and breks compatibility.

However, there are 2 easy ways to add this to links:

Using embeded html

fiddle

some text with a link <a href="http://www.google.com" target="blank">google</a>

Create an extension

Syntax

[adjustable](http://google.com "Giiidd"){:target="_blank"}

Test online

fiddle

Code

showdown.extension('targetlink', function() {
  return [{
    type: 'lang',
    regex: /\[((?:\[[^\]]*]|[^\[\]])*)]\([ \t]*<?(.*?(?:\(.*?\).*?)?)>?[ \t]*((['"])(.*?)\4[ \t]*)?\)\{\:target=(["'])(.*)\6}/g,
    replace: function(wholematch, linkText, url, a, b, title, c, target) {

      var result = '<a href="' + url + '"';

      if (typeof title != 'undefined' && title !== '' && title !== null) {
        title = title.replace(/"/g, '&quot;');
        title = showdown.helper.escapeCharacters(title, '*_', false);
        result += ' title="' + title + '"';
      }

      if (typeof target != 'undefined' && target !== '' && target !== null) {
        result += ' target="' + target + '"';
      }

      result += '>' + linkText + '</a>';
      return result;
    }
  }];
});

All 5 comments

+1 for this feature.

is there any work around for now?

Adding extra syntax to the link element is not a good idea as it diverts from the markdown spec and breks compatibility.

However, there are 2 easy ways to add this to links:

Using embeded html

fiddle

some text with a link <a href="http://www.google.com" target="blank">google</a>

Create an extension

Syntax

[adjustable](http://google.com "Giiidd"){:target="_blank"}

Test online

fiddle

Code

showdown.extension('targetlink', function() {
  return [{
    type: 'lang',
    regex: /\[((?:\[[^\]]*]|[^\[\]])*)]\([ \t]*<?(.*?(?:\(.*?\).*?)?)>?[ \t]*((['"])(.*?)\4[ \t]*)?\)\{\:target=(["'])(.*)\6}/g,
    replace: function(wholematch, linkText, url, a, b, title, c, target) {

      var result = '<a href="' + url + '"';

      if (typeof title != 'undefined' && title !== '' && title !== null) {
        title = title.replace(/"/g, '&quot;');
        title = showdown.helper.escapeCharacters(title, '*_', false);
        result += ' title="' + title + '"';
      }

      if (typeof target != 'undefined' && target !== '' && target !== null) {
        result += ' target="' + target + '"';
      }

      result += '>' + linkText + '</a>';
      return result;
    }
  }];
});

In case anyone is using the extension code above there is a bug - if two links are placed next to each other... the correct RE is this:

regex: /\[((?:\[[^\]]*]|[^\[\]])*)]\([ \t]*<?(.*?(?:\(.*?\).*?)?)>?[ \t]*((['"])(.*?)\4[ \t]*)?\)\{\:target=(["'])(.*?)\6}/g

Fixed Extension Code

showdown.extension('targetlink', function() {
  return [{
    type: 'lang',
    regex: /\[((?:\[[^\]]*]|[^\[\]])*)]\([ \t]*<?(.*?(?:\(.*?\).*?)?)>?[ \t]*((['"])(.*?)\4[ \t]*)?\)\{\:target=(["'])(.*?)\6}/g,
    replace: function(wholematch, linkText, url, a, b, title, c, target) {

      var result = '<a href="' + url + '"';

      if (typeof title != 'undefined' && title !== '' && title !== null) {
        title = title.replace(/"/g, '&quot;');
        title = showdown.helper.escapeCharacters(title, '*_', false);
        result += ' title="' + title + '"';
      }

      if (typeof target != 'undefined' && target !== '' && target !== null) {
        result += ' target="' + target + '"';
      }

      result += '>' + linkText + '</a>';
      return result;
    }
  }];
});
Was this page helpful?
0 / 5 - 0 ratings

Related issues

ifeltsweet picture ifeltsweet  路  6Comments

buremba picture buremba  路  4Comments

andistuder picture andistuder  路  5Comments

jonaskello picture jonaskello  路  4Comments

geudrik picture geudrik  路  7Comments