有没有办法在Markdown中创建一个在新窗口中打开的链接?如果不是,您建议使用什么语法来完成此操作?我将把它添加到我使用的markdown编译器中。我认为这应该是一个选择。
当前回答
React + Markdown环境:
我创建了一个可重用组件:
export type TargetBlankLinkProps = {
label?: string;
href?: string;
};
export const TargetBlankLink = ({
label = "",
href = "",
}: TargetBlankLinkProps) => (
<a href={href} target="__blank">
{label}
</a>
);
我在任何需要在新窗口中打开链接的地方都使用它。
其他回答
Kramdown对此表示支持。它与标准Markdown语法兼容,但也有许多扩展。你可以这样使用它:
[link](url){:target="_blank"}
您可以使用{[attr]="[prop]"}添加任何属性
例如[谷歌](http://www.google.com){target="_blank"}
幽灵降价使用:
[Google](https://google.com" target="_blank)
在这里找到它: https://cmatskas.com/open-external-links-in-a-new-window-ghost/
完成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';
}
}
}
所以,这不是完全正确的,你不能添加链接属性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
推荐文章
- 如何在表中删除行和列之间不需要的空间?
- 如何清除所有<div>的内容在一个父<div>?
- HTML的“nonce”属性用于脚本和样式元素的目的是什么?
- 我如何在HTML中创建一个泪滴?
- 在另一个js文件中调用JavaScript函数
- 我怎么能强迫一个长字符串没有任何空白被包装?
- 在哪里放置JavaScript在HTML文件?
- 如何在引导栏中居中内容?
- 我如何在NSAttributedString中创建一个可点击的链接?
- IE8问题推特引导3
- 是否有可能使一个div 50px小于100%在CSS3?
- 为什么CSS选择器/ HTML属性首选破折号?
- 如何在标题属性中转义双引号
- Safari和Chrome桌面浏览器无法自动播放视频
- 自动高度