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


我不认为有降价功能,尽管如果你想用JavaScript自动打开指向你自己网站以外的链接,可能有其他可用的选项。

Array.from(javascript.links)
    .filter(link => link.hostname != window.location.hostname)
    .forEach(link => link.target = '_blank');

jsFiddle。

如果你正在使用jQuery:

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

jsFiddle。


就Markdown语法而言,如果想要获得如此详细的内容,就必须使用HTML。

<a href="http://example.com/" target="_blank">Hello, world!</a>

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

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


Kramdown对此表示支持。它与标准Markdown语法兼容,但也有许多扩展。你可以这样使用它:

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

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

由于用户生成的链接创建markdown需要在一个新的选项卡中打开,但网站链接需要留在选项卡中,我改变了markdown,只生成在一个新的选项卡中打开的链接。所以不是所有的链接在页面上链接,只是那些使用markdown。

在markdown我改变了所有的链接输出为<a target='_blank' href="…>,这很容易使用查找/替换。


我不认为停留在一个浏览器选项卡中会有更好的用户体验。如果你想让人们留在你的网站上,或者回来读完那篇文章,在一个新的标签中把他们发送出去。

在@davidmorrow的回答上,把这个javascript扔到你的网站上,把外部链接变成target=_blank的链接:

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

      })

    </script>

仅对外部链接自动,使用GNU sed & make

如果有人想系统地为所有外部链接做这件事,CSS是没有选择的。然而,一旦Markdown创建了(X)HTML,就可以运行下面的sed命令:

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

通过将上述sed命令添加到makefile中,可以进一步实现自动化。有关详细信息,请参阅GNU make或在我的网站上查看我是如何做的。


你可以通过本地javascript代码这样做:

 
var pattern = /a href=/g;
var sanitizedMarkDownText = rawMarkDownText.replace(pattern,"a target='_blank' href=");

JSFiddle Code


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

例如[谷歌](http://www.google.com){target="_blank"}


在Markdown v2.5.2中,你可以这样使用:

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

完成alex回答(12月13日至10日)

一个更聪明的注入目标可以用下面的代码完成:

/*
 * 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?)组构造中添加更多扩展来更改regexp异常(请在这里了解这个regexp: https://regex101.com/r/sE6gT9/3)。

对于没有jQuery的版本,检查下面的代码:

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';
        } 
    }
}

在我的项目中,我这样做,它工作得很好:

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

Link

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


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

<script>
    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';
        }
    }
</script>

该代码与IE8+兼容,您可以将其添加到页面底部。注意,您需要更改“。Post-content (Post-content)指向你在帖子中使用的类。

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


幽灵降价使用:

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

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


我正在使用Grav CMS,这是完美的:

阀体/内容: 一些文本[1]

车身/参考: [1]: http://somelink.com/?target=_blank

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

也可以作为直接链接: [进入本页](http://somelink.com/?target=_blank)


一个全局解决方案是放置<base target="_blank"> 到页面的<head>元素中。这有效地将默认目标添加到每个锚元素。我使用markdown在我的基于wordpress的网站上创建内容,我的主题定制器将允许我将该代码注入到每个页面的顶部。如果您的主题不能做到这一点,可以使用插件


所以,这不是完全正确的,你不能添加链接属性Markdown URL。要添加属性,请检查正在使用的底层markdown解析器及其扩展。

特别是,pandoc有一个扩展来启用link_attributes,它允许在链接中进行标记。如。

[Hello, world!](http://example.com/){target="_blank"}

对于那些来自R的(例如使用rmarkdown, bookdown, blogdown等等),这是你想要的语法。 对于那些不使用R的用户,你可能需要在调用pandoc时使用+link_attributes来启用扩展

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

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

特别是:

# Pandoc
{ attribute1="value1" attribute2="value2"}

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

这为我工作:[页面链接](你的url在这里"(目标|_blank)")


不是一个直接的答案,但可能会帮助一些人在这里结束。

如果你正在使用GatsbyJS,有一个插件可以自动在markdown中添加target="_blank"到外部链接。

它被称为gatsby-remark-external-links,用法如下:

Yarn添加gatsby-remark-external-links

plugins: [      
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [{
        resolve: "gatsby-remark-external-links",
        options: {
          target: "_blank",
          rel: "noopener noreferrer"
        }
      }]
    }
  },

它还负责rel="noopener noreferrer"。

如果需要更多选项,请参考文档。


如果您只想在特定的链接中执行此操作,只需使用其他人回答的内联属性列表语法,或者只使用HTML。

如果你想在所有生成的<a>标签中这样做,这取决于你的Markdown编译器,也许你需要一个扩展。

这些天我正在为我的博客做这个,它是由pelican生成的,它使用Python-Markdown。我找到了Python-Markdown Phuker/markdown_link_attr_modifier的扩展,它工作得很好。注意,旧的名为newtab的扩展在Python-Markdown 3.x中似乎不起作用。


如果有人正在寻找一个全局rmarkdown (pandoc)解决方案。

使用Pandoc Lua过滤器

你可以编写自己的Pandoc Lua过滤器,将target="_blank"添加到所有链接:

编写一个Pandoc Lua过滤器,例如links.lua

function Link(element)

    if 
        string.sub(element.target, 1, 1) ~= "#"
    then
        element.attributes.target = "_blank"
    end
    return element

end

然后更新你的_output.yml

bookdown::gitbook:
  pandoc_args:
    - --lua-filter=links.lua

在Header中注入<base target="_blank">

另一种解决方案是使用includes选项在HTML头部部分注入<base target="_blank">:

创建一个新的HTML文件,例如links.html

<base target="_blank">

然后更新你的_output.yml

bookdown::gitbook:
  includes:
    in_header: links.html

注意:此解决方案还可能为哈希(#)指针/ url打开新选项卡。我还没有用这样的url测试这个解决方案。


在《Laravel》中,我是这样解决的:

$post->text= Str::replace('<a ', '<a target="_blank"', $post->text);

Not适用于特定链接。编辑Markdown文本中的所有链接。(对我来说还好)


React + Markdown环境:

我创建了一个可重用组件:

export type TargetBlankLinkProps = {
  label?: string;
  href?: string;
};

export const TargetBlankLink = ({
  label = "",
  href = "",
}: TargetBlankLinkProps) => (
  <a href={href} target="__blank">
    {label}
  </a>
);

我在任何需要在新窗口中打开链接的地方都使用它。


使用MUI v5“markdown-to-jsx”

这似乎对我很管用:

import Markdown from 'markdown-to-jsx';

...

  const MarkdownLink = ({ children, ...props }) => (
    <Link {...props}>{children}</Link>
  );

...

          <Markdown
            options={{
              forceBlock: true,
              overrides: {
                a: {
                  component: MarkdownLink,
                  props: {
                    target: '_blank',
                  },
                },
              },
            }}
          >
            {description}
          </Markdown>