关于html:我可以在Markdown中创建’target =“_ blank”’的链接吗?

Can I create links with 'target=“_blank”' in Markdown?

有没有办法在Markdown中创建一个在新窗口中打开的链接? 如果没有,您建议使用什么语法来执行此操作。 我将它添加到我使用的markdown编译器中。 我认为这应该是一种选择。


就Markdown语法而言,如果你想要详细说明,你只需要使用HTML。

1
Hello, world!

我见过的大多数Markdown引擎都允许使用普通的旧HTML,只是在这种情况下,通用文本标记系统不会削减它。 (例如,StackOverflow引擎。)然后,他们通过HTML白名单过滤器运行整个输出,因为即使仅Markdown文档也可以轻松包含XSS攻击。因此,如果您或您的用户想要创建_blank链接,那么他们可能仍然可以。

如果这是您经常使用的功能,那么创建自己的语法可能是有意义的,但它通常不是一个重要的功能。如果我想在新窗口中启动该链接,我将自己点击它,谢谢。


Kramdown支持它。它与标准Markdown语法兼容,但也有许多扩展。你会像这样使用它:

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


我不认为有降价功能。

如果您想要使用JavaScript自动打开指向您自己网站之外的链接,可能还有其他选项可用。

1
2
3
4
5
6
7
var links = document.links;

for (var i = 0, linksLength = links.length; i < linksLength; i++) {
   if (links[i].hostname != window.location.hostname) {
       links[i].target = '_blank';
   }
}

的jsfiddle。

如果你使用的是jQuery,那就简单了......

1
2
3
$(document.links).filter(function() {
    return this.hostname != window.location.hostname;
}).attr('target', '_blank');

的jsfiddle。


使用Markdown-2.5.2,您可以使用:

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


一个全球解决方案是放
进入页面的元素。这有效地为每个锚元素添加了默认目标。我使用markdown在基于Wordpress的网站上创建内容,我的主题定制器将让我将代码注入每个页面的顶部。如果你的主题没有这样做,那就有一个插件


我正在使用Grav CMS,这非常有效:

车身/内容:

Some text[1]

车身/参考:

[1]: http://somelink.com/?target=_blank

只需确保首先传递target属性,如果链接中有其他属性,则将它们复制/粘贴到引用URL的末尾。

也可以作为直接链接:
[Go to this page](http://somelink.com/?target=_blank)


对于鬼降价使用:

1
[Google](https://google.com" target="_blank)

在这里找到它:
https://cmatskas.com/open-external-links-in-a-new-window-ghost/


在我的项目中我正在做这个并且它工作正常:

1
[Link](https://example.org/"title" target="_blank")

链接

但并非所有解析器都允许您这样做。


您可以通过本机javascript代码执行此操作,如下所示:

1
2
3
 <wyn>
var pattern = /a href=/g;
var sanitizedMarkDownText = rawMarkDownText.replace(pattern,"a target='_blank' href=");

JSFiddle代码


没有简单的方法可以做到这一点,就像@alex已经注意到你需要使用JavaScript一样。他的答案是最好的解决方案,但为了优化它,您可能只想过滤后内容链接。

1
2
3
4
5
6
    var links = document.querySelectorAll( '.post-content a' );  
    for (var i = 0, length = links.length; i < length; i++) {  
        if (links[i].hostname != window.location.hostname) {
            links[i].target = '_blank';
        }
    }

该代码与IE8 +兼容,您可以将其添加到页面底部。请注意,您需要将".post-content a"更改为您用于帖子的课程。

如下所示:http://blog.hubii.com/target-_blank-for-links-on-ghost/


因此,您无法将链接属性添加到Markdown URL,这是不正确的。要添加属性,请检查正在使用的基础markdown解析器以及它们的扩展名。

特别是,pandoc具有启用link_attributes的扩展名,允许链接中的标记。例如

1
[Hello, world!](http://example.com/){target="_blank"}
  • 对于那些来自R的人(例如使用rmarkdownbookdownblogdown等),这就是你想要的语法。
  • 对于那些不使用R的用户,您可能需要在pandoc的调用中使用+link_attributes启用扩展

注意:这与kramdown解析器的支持不同,后者是上面接受的答案之一。特别要注意的是,kramdown与pandoc不同,因为它需要冒号 - : - 在大括号的开头 - {},例如

1
[link](http://example.com){:hreflang="de"}

特别是:

1
2
3
4
5
6
7
# Pandoc
{ attribute1="value1" attribute2="value2"}

# Kramdown
{: attribute1="value1" attribute2="value2"}
 ^
 ^ Colon


我尝试使用PHP实现markdown时遇到了这个问题。

由于使用markdown创建的用户生成的链接需要在新选项卡中打开,但站点链接需要保留在选项卡中,我更改了markdown以仅生成在新选项卡中打开的链接。因此,并非页面上的所有链接都链接出来,只有那些使用markdown的链接。

在markdown中,我将所有链接输出更改为,这很容易使用find / replace。


我不同意保持在一个浏览器选项卡中更好的用户体验。如果您希望人们留在您的网站上,或者回来阅读该文章,请在新标签中将其发送出去。

在@ davidmorrow的答案的基础上,将此javascript投入您的网站,并将外部链接转换为与target = _blank的链接:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    <script type="text/javascript" charset="utf-8">
      // Creating custom :external selector
      $.expr[':'].external = function(obj){
          return !obj.href.match(/^mailto\:/)
                  && (obj.hostname != location.hostname);
      };

      $(function(){
        // Add 'external' CSS class to all external links
        $('a:external').addClass('external');

        // turn target into target=_blank for elements w external class
        $(".external").attr('target','_blank');

      })

仅使用GNU sed和make自动进行外部链接

如果有人想系统地为所有外部链接做这个,那么CSS是不可取的。但是,一旦从Markdown创建(X)HTML,就可以运行以下sed命令:

1
sed -i 's|href="http|target="_blank" href="http|g' index.html

通过将sed命令添加到makefile,可以进一步自动化。有关详细信息,请参阅GNU make或了解我是如何在我的网站上完成的。


完成的亚历克斯回答(2010年12月13日)

使用此代码可以实现更智能的注入目标:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/*
 * For all links in the current page...
 */
$(document.links).filter(function() {
    /*
     * ...keep them without `target` already setted...
     */
    return !this.target;
}).filter(function() {
    /*
     * ...and keep them are not on current domain...
     */
    return this.hostname !== window.location.hostname ||
        /*
         * ...or are not a web file (.pdf, .jpg, .png, .js, .mp4, etc.).
         */
        /\.(?!html?|php3?|aspx?)([a-z]{0,3}|[a-zt]{0,4})$/.test(this.pathname);
/*
 * For all link kept, add the `target="_blank"` attribute.
 */
}).attr('target', '_blank');

您可以通过在(?!html?|php3?|aspx?)组构造中添加更多扩展来更改正则表达式例外(在此处了解此正则表达式:https://regex101.com/r/sE6gT9/3)。

对于没有jQuery版本,请检查以下代码:

1
2
3
4
5
6
7
8
9
10
11
var links = document.links;
for (var i = 0; i < links.length; i++) {
    if (!links[i].target) {
        if (
            links[i].hostname !== window.location.hostname ||
            /\.(?!html?)([a-z]{0,3}|[a-zt]{0,4})$/.test(links[i].pathname)
        ) {
            links[i].target = '_blank';
        }
    }
}

这对我有用:[页面链接](你的网址在这里"(目标| _blank)")


您可以使用{[attr] ="[prop]"}添加任何属性

例如[Google](http://www.google.com){target ="_ blank"}