我可以在Markdown中创建带有“目标=_blank”的链接吗？

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

386968 次浏览
小开

我认为没有降价功能，尽管如果您想使用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语法而言，如果你想得到详细的信息，你只需要使用超文本标记语言。

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

我见过的大多数Markdown引擎都允许普通的旧超文本标记语言，只是在这样的情况下，通用文本标记系统无法解决它。（例如StackOverflow引擎。）然后，它们通过超文本标记语言白名单过滤器运行整个输出，无论如何，因为即使是仅限Markdown的文档也可以轻松包含XSS攻击。因此，如果您或您的用户想要创建_blank链接，那么他们可能仍然可以。

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

小开

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

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

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

由于用户生成的链接需要在新选项卡中打开，但网站链接需要保留在选项卡中，因此我将Markdown更改为仅生成在新选项卡中打开的链接。因此，并非页面上的所有链接都链接出来，只是使用Markdown的链接。

在Markdown中，我将所有链接输出更改为<a target='_blank' href="...">，这很容易使用查找/替换。

小开

我不同意停留在一个浏览器选项卡中是更好的用户体验。如果你想让人们留在你的网站上，或者回来读完那篇文章，把他们送到一个新的选项卡中。

基于@davidmorrow的回答，将此javascript扔进您的网站，并将外部链接转换为目标=_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 ses&make

如果想对所有外部链接系统地执行此操作，CSS没有选择。但是，一旦从Markdown创建了（X）超文本标记语言，就可以运行以下sed命令：

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

这可以通过将上述sed命令添加到makefile来进一步自动化。有关详细信息，请参阅我的网站上的GNUmake或看看我是怎么做到的。

小开

您可以通过原生javascript代码执行此操作，如下所示：

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

JSFiddle代码

小开

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

例如[Google]（http://www.google.com）{Target="_blank"}

小开

使用Markdown v2.5.2，您可以使用：

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

对于完成的亚历克斯回答（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?)组构造中添加更多扩展来更改正则表达式异常（在此处了解此正则表达式：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")

链接

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

小开

没有简单的方法可以做到这一点，就像@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 a”更改为您用于帖子的类。

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

小开

对于幽灵Markdown使用：

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

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

小开

我正在使用Grav CMS，这非常有效：

正文/内容：
Some text[1]

正文/参考：
[1]: http://somelink.com/?target=_blank

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

也可以作为直接链接：
[Go to this page](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的用户，您可能需要在+link_attributes调用pandoc时使用启用扩展

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

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

特别是：

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


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

这对我有用：[页面链接]（你的网址在这里"（目标|_blank）"）

小开

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

如果您使用的是GatsbyJS，则有一个插件可以自动将target="_blank"添加到Markdown中的外部链接。

它被称为盖茨比-备注-外部链接，使用方式如下：

yarn add 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"。

如果需要更多选项，请参考相关文档。

小开

如果您只想在特定链接中执行此操作，只需使用内联属性列表语法，就像其他人回答的那样，或者只需使用超文本标记语言。

如果您想在所有生成的<a>标签中执行此操作，这取决于您的Markdown编译器，也许您需要对其进行扩展。

这些天我正在为我的博客做这件事，它是由pelican生成的，它使用Python-Markdown。我发现了一个Python-Markdown普克/markdown_link_attr_modifier的扩展，它运行良好。请注意，一个名为newtab的旧扩展似乎在Python-Markdown 3. x中不起作用。

小开

如果有人正在寻找Global#EYZ0（pandoc）解决方案。

使用Pandoc Lua过滤器

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

  1. 编写一个Pandoc Lua过滤器，例如links.lua
function Link(element)


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


end
  1. 然后更新您的_output.yml
bookdown::gitbook:
pandoc_args:
- --lua-filter=links.lua

在标头中注入<base target="_blank">

另一种解决方案是使用includes选项在超文本标记语言head部分注入<base target="_blank">：

  1. 创建一个新的超文本标记语言文件，例如links.html
<base target="_blank">
  1. 然后更新您的_output.yml
bookdown::gitbook:
includes:
in_header: links.html

注意：此解决方案还可能为哈希（#）指针/URL打开新选项卡。我没有用这样的URL测试过这个解决方案。

小开

在Laravel中，我是这样解决的：

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

不适用于特定链接。编辑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的“mark down 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>

提交答案