Открытие ссылок в новом окне Markdown: синтаксис и методы

Быстрый ответ

Нужен быстрый ответ? Используйте HTML-тег <a> с атрибутом target="_blank" непосредственно в Markdown:

<a href="https://example.com" target="_blank">Ссылка, открывающаяся в новой вкладке</a>

Это простейшее решение. Скопируйте код, вставьте его в документ, и у вас появится ссылка, которая будет открываться в новом окне браузера.

Расширенные возможности Markdown и их пользовательское применение

Применение target="_blank" на практике

HTML — это хорошо, но что, если мы хотим использовать дополнительные возможности Markdown? Парсеры, такие как pandoc и Kramdown, предоставляют синтаксис для добавления атрибутов, в том числе target="_blank":

• Kramdown: [Крутая ссылка](http://awesomeness.com){:target="_blank"}
• Pandoc: Подключите +link_attributes, чтобы добавить [Крутая ссылка](http://awesomeness.com){target="_blank"}

Перед применением убедитесь, поддерживает ли ваш парсер Markdown атрибут target="_blank".

Подробнее об этом расскажет наш спикер на видео

Защита от межсайтовых скриптов (XSS)

Важно сохранять безопасность кода при сочетании HTML и Markdown. Очистите данные от возможных уязвимостей для предотвращения XSS-атак. Следуйте рекомендациям по фильтрации HTML, особенно в случаях работы с пользовательским контентом.

Использование JavaScript для динамического добавления атрибутов

JavaScript позволяет устанавливать атрибут target="_blank" для ссылок после загрузки страницы, что освобождает вас от необходимости редактировать исходный код Markdown:

// Меняем, не переписывая исходный код? Легко! 😉
document.querySelectorAll('a[href^="http://"], a[href^="https://"]').forEach(link => {
  if(link.hostname !== location.hostname) {
    link.target = '_blank';
  }
});

Данный скрипт работает без jQuery и автоматически модифицирует все внешние ссылки так, чтобы они открывались в новых вкладках.

Визуализация

Использование target="_blank" в Markdown как будто знакомит вас с новинками, сберегая привычную теплоту знакомого: 🚪✨

[Посетить Страну Чудес](https://wonderland.example "Страна Чудес")

А вот простейшая ссылка в Markdown. Теперь добавим атрибут target="_blank":

[Посетить Страну Чудес](https://wonderland.example){:target="_blank"}

И теперь вы, как будто, в другом измерении, но исходный портал остается открытым. 🌐↗️

Дополнительное о открытии ссылок в новых вкладках

Сделаем использование еще удобнее

Пользователи R Markdown, у нас есть хорошая новость! Просто используйте [Текст ссылки](URL){target="_blank"}, и всё будет функционировать «из коробки».

А знаете ли вы?

Пользователи могут открывать ссылки в новых вкладках, просто выполнив Ctrl+Click или ⌘+Click (на Mac), не используя никакого дополнительного кода. Вот вам и сила пользователя.

Альтернативы: jQuery и персональные расширения

Поклонники jQuery могут воспользоваться своим фреймворком, чтобы автоматически добавлять target="_blank" для внешних ссылок с помощью простого скрипта:

// В игру вступает jQuery
$(document.links).filter(function() {
  return this.hostname !== window.location.hostname;
}).attr('target', '_blank');

А если нужно индивидуальное решение, вы всегда можете разработать своё расширение для Markdown!

Главные особенности

UX-дизайн и использование 'target="_blank"'

Открывать все ссылки в новой вкладке может быть соблазнительно, но такой подход может ухудшить пользовательский опыт (UX). Пользуйтесь такой возможностью обдуманно, чтобы не осложнять восприятие пользователем вашего контента.

Доступность и производительность: двойная выгода

Совмещение target="_blank" и rel="noopener noreferrer" обеспечивает безопасные и быстроздействующие загрузки в современных браузерах:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Ссылка, открывающаяся в новой вкладке</a>

Полезные материалы

1. Шпаргалка по Markdown на GitHub — быстрый доступ к синтаксису Markdown.
2. Обсуждение создания ссылок, открывающихся в новых вкладках, в Markdown на Stack Overflow — полезные советы и примеры.
3. Документация по синтаксису Markdown от Daring Fireball — советы от создателя Markdown.
4. Спецификация CommonMark — унифицированная спецификация для Markdown.
5. Расширенный синтаксис Markdown — подробности о расширенных возможностях Markdown.
6. Когда следует использовать target="_blank" на CSS-Tricks — рекомендации по использованию target="_blank".