Могу ли я создать ссылки с 'target="_blank"' в Markdown?
Есть ли способ создать ссылку в Markdown, которая открывается в новом окне? Если нет, какой синтаксис вы рекомендуете сделать это. Я добавлю это в компилятор уценки, который я использую. Я думаю, что это должен быть вариант.
25 ответов
Что касается синтаксиса Markdown, если вы хотите получить более подробную информацию, вам просто нужно использовать HTML.
<a href="http://example.com/" target="_blank">Hello, world!</a>
Большинство механизмов Markdown, которые я видел, допускают простой старый HTML, только для ситуаций, подобных этой, когда обычная система разметки текста просто не обрежет его. (Механизм Stackru, например.) Затем они пропускают весь вывод через фильтр белого списка HTML, независимо от того, что даже документ только для Markdown может легко содержать атаки XSS. Таким образом, если вы или ваши пользователи хотят создать _blank ссылки, то они, вероятно, еще могут.
Если вы часто будете использовать эту функцию, возможно, имеет смысл создать собственный синтаксис, но обычно это не жизненно важная функция. Если я захочу запустить эту ссылку в новом окне, я сам нажму Ctrl, спасибо.
Крамдаун поддерживает это. Он совместим со стандартным синтаксисом Markdown, но также имеет много расширений. Вы бы использовали это так:
[link](url){:target="_blank"}
Я не думаю, что есть функция уценки.
Хотя могут быть и другие варианты, если вы хотите открывать ссылки, которые автоматически указывают за пределы вашего собственного сайта с помощью JavaScript.
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';
}
}
Если вы используете JQuery, это немного проще...
$(document.links).filter(function() {
return this.hostname != window.location.hostname;
}).attr('target', '_blank');
С Markdown-2.5.2 вы можете использовать это:
[link](url){:target="_blank"}
Таким образом, это не совсем так, что вы не можете добавить атрибуты ссылки к 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
Одним из глобальных решений является <base target="_blank">на вашей странице <head> элемент. Это эффективно добавляет цель по умолчанию к каждому элементу привязки. Я использую markdown для создания контента на своем веб-сайте на базе Wordpress, и мой настройщик тем позволит мне вставлять этот код в верхнюю часть каждой страницы. Если ваша тема не делает этого, есть плагин
Не прямой ответ, но может помочь некоторым людям оказаться здесь.
Если вы используете GatsbyJS, есть плагин, который автоматически добавляетtarget="_blank" на внешние ссылки в вашей уценке.
Он называется gatsby-rebec-external-links и используется так:
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".
Если вам нужны дополнительные параметры, обратитесь к документации.
Для призрачной уценки используйте:
[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)
Нет простого способа сделать это, и, как заметил @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/
В моем проекте я делаю это, и он отлично работает:
[Link](https://example.org/ "title" target="_blank")
Но не все парсеры позволяют вам это делать.
Вы можете сделать это с помощью собственного кода JavaScript следующим образом:
var pattern = /a href=/g;
var sanitizedMarkDownText = rawMarkDownText.replace(pattern,"a target='_blank' href=");
Если кто-то ищет глобальный
rmarkdown(
pandoc) раствор.
Использование Lua-фильтра Pandoc
Вы можете написать свой собственный фильтр 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
- Затем обновите свой
bookdown::gitbook:
pandoc_args:
- --lua-filter=links.lua
Вставить в заголовок
Альтернативным решением будет инъекция<base target="_blank">в HTML
headраздел с использованиемincludesвариант:
- Создайте новый файл 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);
Не работает для конкретной ссылки. Отредактируйте все ссылки в тексте Markdown. (в моем случае нормально)
Если вы работаете с MkDocs, вас может заинтересовать
Этот плагин добавляет JS для открытия исходящих ссылок и PDF-файлов на новой вкладке.
Установите плагин, используя pip из PyPI:
pip3 install mkdocs-open-in-new-tab
Просто добавьте плагин:
plugins:
- search
- open-in-new-tab
Подробнее о плагин Открыть в новой вкладке.плагине .
ДляReact+Markdownсреда:
Я создал повторно используемый компонент:
export type TargetBlankLinkProps = {
label?: string;
href?: string;
};
export const TargetBlankLink = ({
label = "",
href = "",
}: TargetBlankLinkProps) => (
<a href={href} target="__blank">
{label}
</a>
);
И я использую его везде, где мне нужна ссылка, которая открывается в новом окне.
Если вы просто хотите сделать это в определенной ссылке, просто используйте синтаксис встроенного списка атрибутов, как ответили другие, или просто используйте HTML.
Если вы хотите сделать это во всех сгенерированных
<a> теги, зависит от вашего компилятора Markdown, возможно, вам нужно его расширение.
Сейчас я делаю это для своего блога, который создается
pelican, которые используют
Python-Markdown. И я нашел расширение для
Python-Markdown https://github.com/Phuker/markdown_link_attr_modifier, работает хорошо. Обратите внимание, что старое расширение называлось
newtab похоже, не работает в Python-Markdown 3.x.
За выполненный алекс ответили (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';
}
}
}
Я столкнулся с этой проблемой при попытке реализовать уценку с помощью PHP.
Так как сгенерированные пользователем ссылки, созданные с помощью markdown, должны открываться на новой вкладке, а ссылки сайта должны оставаться на вкладке, я изменил markdown, чтобы генерировать только те ссылки, которые открываются на новой вкладке. Так что не все ссылки на странице ссылаются, а только те, которые используют уценку.
В уценке я изменил весь вывод ссылки на <a target='_blank' href="..."> что было достаточно легко с помощью поиска / замены.
Слишком поздно, но пользователи могут просто использовать
CTRL+Click чтобы открыть ссылку в новой вкладке.
Я не согласен с тем, что удобнее работать с одной вкладкой браузера. Если вы хотите, чтобы люди оставались на вашем сайте, или вернулись, чтобы закончить читать эту статью, отправьте их в новую вкладку.
Основываясь на ответе @ 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>
Для «markdown-to-jsx» с MUI v5
Кажется, это работает для меня:
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>
Вы можете добавить любые атрибуты, используя {[attr]="[prop]"}
Например, [Google] ( http://www.google.com/){target="_blank"}
Автоматизировано только для внешних ссылок с использованием GNU sed & make
Если вы хотите сделать это систематически для всех внешних ссылок, CSS не вариант. Тем не менее, можно запустить следующее sed команда, как только (X)HTML был создан из Markdown:
sed -i 's|href="http|target="_blank" href="http|g' index.html
Это может быть дополнительно автоматизировано путем добавления выше sed командовать makefile, Подробнее см. GNU make или посмотрите, как я это сделал на моем сайте.
Это работает для меня: [Page Link](ваш URL здесь "(target|_blank)")