Могу ли я создать ссылки с 'target=" blank " в Markdown?

есть ли способ создать ссылку в Markdown, которая откроется в новом окне? Если нет, то какой синтаксис вы рекомендуете для этого. Я добавлю его в компилятор markdown, который я использую. Я думаю, это должен быть вариант.

16 ответов


что касается синтаксиса Markdown, если вы хотите получить эту подробную информацию, вам просто нужно использовать HTML.

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

большинство двигателей Markdown, которые я видел, позволяют простой старый HTML, только для таких ситуаций, когда общая система разметки текста просто не будет сокращать его. (Например, механизм StackOverflow.) Затем они запускают весь вывод через фильтр белого списка HTML, независимо от того, так как даже уцененный документ может легко содержать атаки XSS. Как таковой, если вы или ваш пользователи хотят создать _blank ссылки, тогда они, вероятно, все еще могут.

Если это функция, которую вы собираетесь часто использовать, может иметь смысл создать свой собственный синтаксис, но это, как правило, не жизненно важная функция. Если я хочу запустить эту ссылку в новом окне, я сам щелкну ее ctrl, спасибо.


Kramdown поддерживает его. Он совместим со стандартным синтаксисом Markdown, но также имеет много расширений. Вы бы использовали его так:

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

Я не думаю, что есть функция markdown.

хотя могут быть и другие варианты, если вы хотите открыть ссылки, которые указывают за пределами вашего собственного сайта автоматически с помощью 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';
   } 
}

jsFiddle.

Если вы используете jQuery, это немного проще...

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

jsFiddle.


С Markdown-2.5.2, вы можете использовать это:

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

в моем проекте я делаю это и он отлично работает:

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

ссылке

но не все Парсеры позволяют вам это делать.


для использования ghost markdown:

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

нашел его здесь: https://cmatskas.com/open-external-links-in-a-new-window-ghost/


вы можете сделать это с помощью собственного кода javascript, например:

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

Код JSFiddle


нет простого способа сделать это, и, как отметил @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/


одно глобальное решение-поставить <base target="_blank"> в вашу страницу <head> элемент. Это эффективно добавляет цель по умолчанию к каждому элементу anchor. Я использую markdown для создания контента на моем веб-сайте Wordpress, и мой настройщик темы позволит мне ввести этот код в верхнюю часть каждой страницы. Если ваша тема не есть плагин


Я использую Grav CMS, и это отлично работает:

Тело/Содержание:
Some text[1]

Тело/Ссылка:
[1]: http://somelink.com/?target=_blank

просто убедитесь, что сначала передается целевой атрибут, если в ссылке есть дополнительные атрибуты, скопируйте/вставьте их в конец ссылочного URL.

также работает как прямая ссылка:
[Go to this page](http://somelink.com/?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

я столкнулся с этой проблемой при попытке реализовать markdown с помощью PHP.

поскольку сгенерированные пользователем ссылки, созданные с уценкой, должны открываться на новой вкладке, но ссылки на сайт должны оставаться на вкладке, я изменил уценку, чтобы создавать только ссылки, которые открываются на новой вкладке. Таким образом, не все ссылки на странице ссылаются, только те, которые используют markdown.

в markdown я изменил все выходные данные ссылки на <a target='_blank' href="..."> Что было достаточно легко с помощью find / replace.


Я не согласен, что это лучший пользовательский опыт, чтобы остаться в одной вкладке браузера. Если вы хотите, чтобы люди остались на вашем сайте или вернулись, чтобы закончить чтение этой статьи, отправьте их на новую вкладку.

основываясь на ответе @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>

вы можете добавить любые атрибуты, используя {[attr]= " [prop]"}

например [Google] (http://www.google.com) {target= "_blank"}


для завершения Алекс ответил (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');

вы можете изменить исключения regexp с добавлением большего расширения в (?!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';
        } 
    }
}

автоматизировано только для внешних ссылок, используя GNU sed & make

если вы хотите сделать это систематически для всех внешних ссылок,CSS не вариант. Тем не менее, можно запустить следующее sed команда после того, как (X)HTML был создан из Markdown:

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

это можно дополнительно автоматизировать, добавив выше до makefile. Подробнее см. В разделе GNU make или посмотрите, как я сделал это on мой сайт.