Markdown에서 'target =“_ blank”'로 링크를 만들 수 있습니까?


460

Markdown에서 새 창에서 열리는 링크를 만드는 방법이 있습니까? 그렇지 않은 경우 어떤 구문을 권장합니다. 내가 사용하는 마크 다운 컴파일러에 추가하겠습니다. 나는 그것이 옵션이어야한다고 생각합니다.


답변에서 지적했듯이 마크 다운 기능은 아닙니다. 이 사이트를 기본 사이트 전체로 연결하려면 David Morrow가 대답 합니다. 또는 한 인스턴스에서만 수행하려는 경우 Matchu의 답변에 따르면 실제로 HTML로 작성해야한다고 말합니다.
JGallardo


귀하의 질문은 현재하고있는 일에 관한 것이 아니지만 일부 마크 다운 엔진 또는 브라우저 (확실하지 않은)는 생성하는 링크가 다른 도메인을 가리키는 시점을 인식하여 새 탭에서 열 수 있습니다. 나를 위해, 제거 시간이 있습니다 s(가)에서 https:내가 원하는 기능을 얻을 충분하다가.
Josh Gust

답변:


377

Markdown 구문에 관한 한, 자세한 내용을 보려면 HTML을 사용해야합니다.

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

내가 본 대부분의 Markdown 엔진은 일반적인 텍스트 마크 업 시스템이이를 차단하지 않는 이와 같은 상황에서 일반 HTML을 허용합니다. (예를 들어 StackOverflow 엔진) 마크 다운 전용 문서도 쉽게 XSS 공격을 포함 할 수 있기 때문에 HTML 화이트리스트 필터를 통해 전체 출력을 실행합니다. 따라서 귀하 또는 귀하의 사용자가 _blank링크 를 작성하려는 경우 여전히 링크 를 작성할 수 있습니다.

이것이 자주 사용하는 기능인 경우 고유 한 구문을 작성하는 것이 합리적 일 수 있지만 일반적으로 중요한 기능은 아닙니다. 새 창에서 해당 링크를 시작하려면 직접 링크를 클릭하십시오. 감사합니다.


19
나중에 알아? 나는 당신과 alex에 동의합니다 . 나는 전혀 사용하지 않기로 결정했다 _blank. 하나의 브라우저에 물건을 보관하는 것이 더 나은 사용자 경험입니다. 당신이 말한 것처럼 그들은 그냥 뒤로 누르거나 command-click (Mac user here :)) 할 수 있습니다.
ma11hew28

1
내 도메인 외부의 모든 링크에 _blank를 추가하는 페이지에서 javascript를 실행했습니다. @alex는 다음 답변에 있습니다
David Silva Smith

3
나는 (명시적이고 인라인이 읽기 쉽도록) 다음과 같은 구문 [Visit this page](http::/link.com(을 제안 합니다 : 여는 아이디어를 얻습니다 .
Augustin Riedinger

4
간단한 target = "_ blank"는 위험 할 수 있습니다! 태그에 rel = "noopener"도 추가하십시오! ( sites.google.com/site/bughunteruniversity/nonvuln/… )
최대 Vyaznikov

1
@MaxVyaznikov 재미있는. 브라우저가 로그인을 위해 엣지 팝업 창 위에 제공된 경우 더 안전하다고 생각하십니까? 웹 사이트의 로그인 UI를 "유사한"웹 페이지에서 만든 스푸핑 및 위조 로그인 UI와 분리하십시오. 과거에는 더 어려웠던 곳에서 가능할 수도 있습니다.
1.21 기가 와트

350

Kramdown이 지원합니다. 표준 Markdown 구문과 호환되지만 많은 확장 기능도 있습니다. 다음과 같이 사용하십시오.

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

7
Mac에서 Markdown 엔진을 사용하면 작동하지 않는 것 같습니다 :-(
Netsi1964

48
jekyll과 함께 잘 작동합니다!
bholagabbar

1
kramdown의 구문 : [링크 이름] (URL_LINK) {: 대상 = "_ 빈은"}는 kramdown 온라인 편집기를 사용하여 HTML로 해석 할 수 있습니다 http://trykramdown.herokuapp.com/ 이미 꽤 있었기 때문에 나는 그것을 사용 kramdown 참조 및 다시 입력하지 않기를 원했습니다.
algoquant 2016 년

4
jekyll에서 이것을 기본값으로 설정하는 방법이 있습니까? 나는 열립니다 모든처럼 내 블로그 게시물의 링크를 거라고target="_blank"
ahirschberg

10
작동하지 않습니다. {: target = "_ blank"}를 텍스트로 렌더링합니다.
Benny

113

마크 다운 기능이 없다고 생각합니다.

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 .


1
나는 당신에게 동의하지만 당신이 iframe에있는 경우 링크를 사용하여 프레임에서 폭발해야합니다.
David Morrow

2
사람들을 새 창으로 만들 수있는 유일한 시간은 외부 어딘가에있는 문장을 반쯤 밟을 때 뿐이며 흐름을 방해하지 않고 내 의견에 대한 출처를 제공하고 싶습니다. 이
JS

14
Jakob Nielson의 인용문은 더 이상 여기에 적용되지 않습니다. 새 창을 여는 것에 대해 불평하지만 요즘 target = "_ blank"가 새 탭에서 열립니다. 다른 도메인에 대한 링크가 새 탭에서 열리지 않으면 개인적으로 마음에 들지 않습니다.
Alexander Rechsteiner

3
또한 : 말하기 Jakob Nielsen says you shouldn't do that는 끔찍한 주장 이기 때문 입니다.
Ola Tuvesson '

2
여기서는 글로벌 솔루션으로 THIS가 바람직하다는 점을 추가하겠습니다. Markdown을 깨끗하게 유지합니다.
Adam Michael Wood

47

Markdown-2.5.2에서는 다음을 사용할 수 있습니다.

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

2
나는 이것을 시도했지만 그것은 효과가 없었다. django 1.6와 함께 사용
joel goldstick

5
Jekyll v2.4.0에서 작동 (이전 버전에서도 작동 할 수 있음)
nicksuch

5
이것은 kramdown입니다 (그리고 Jekyll은 kramdown을 사용하므로 Jekyll과 함께 작동합니다).
z3ntu

1
이 구문을 GitLab에서 작동시킬 수 없습니다. 현재 사용중인 Markdown 버전이 확실하지 않습니다.
Rockin4Life33

모든 링크에 대해 기본값을 지정할 필요가 없도록 기본값을 설정하는 방법이 있습니까?
Connel

8

하나의 글로벌 솔루션은 <base target="_blank"> 페이지 <head>요소 에 넣는 것 입니다. 그러면 모든 앵커 요소에 기본 대상이 효과적으로 추가됩니다. 마크 다운을 사용하여 Wordpress 기반 웹 사이트에서 컨텐츠를 작성하며 테마 사용자 정의 프로그램을 사용하여 모든 페이지의 맨 위에 해당 코드를 삽입 할 수 있습니다. 테마가 그렇게하지 않으면 플러그인이 있습니다.


8

Grav CMS를 사용하고 있으며 완벽하게 작동합니다.

본문 / 내용 :
Some text[1]

본문 / 참조 :
[1]: http://somelink.com/?target=_blank

대상 속성이 먼저 전달되는지 확인하십시오. 링크에 추가 속성이 있으면 참조 URL의 끝에 복사 / 붙여 넣기하십시오.

직접 링크로도 작동합니다.
[Go to this page](http://somelink.com/?target=_blank)


참고로 다음은 관련 문서 장 입니다.
domsson

7

고스트 마크 다운 사용 :

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

여기에서 찾았습니다 : https://cmatskas.com/open-external-links-in-a-new-window-ghost/


1
나는 당신의 해결책을 좋아합니다. 다른 구성으로 시도했지만 인라인 링크 에서만 작동하는 것 같습니다 . 어쩌면 참조 링크 와 연결하는 방법이있을 수 있습니다 . 같은 : [open new window][1] \n [1]: (https://abc.xyz" target="_blank). 어쩌면 내가 무언가를 잘못 생각하거나, 그런 식으로 작동하지 않습니까?
MrIsaacs

7

따라서 마크 다운 URL에 링크 속성을 추가 할 수 없다는 것은 사실이 아닙니다. 속성을 추가하려면 사용중인 기본 markdown 파서와 해당 확장이 무엇인지 확인하십시오.

특히, 링크 pandoc확장을 가능하게하는 enable 확장자가 있습니다 link_attributes. 예 :

[Hello, world!](http://example.com/){target="_blank"}
  • 에서 오는 사람들을 위해 R (사용 예를 들어 rmarkdown, bookdown, blogdown등), 이것은 당신이 원하는 구문입니다.
  • R을 사용하지 않는 사용자의 경우 와 의 통화 에서 내선 번호활성화 해야 할 수도 있습니다pandoc+link_attributes

참고 : 이것은 kramdown파서의 지원과 는 다른 것으로, 위의 답변 중 하나입니다. - 특히, 참고 pandoc에서 kramdown의 다릅니다은 콜론 필요로하기 때문에 것을 :- 중괄호의 시작 - {}예를

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

특히:

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

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

이것은 우리의 맞춤형 마크 다운 환경에서 나를 위해 일했습니다. 감사!
klewis

6

네이티브 자바 스크립트 코드를 통해 다음과 같이 할 수 있습니다.

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

JSFiddle 코드


6

내 프로젝트 에서이 작업을 수행하고 있으며 정상적으로 작동합니다.

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

링크

그러나 모든 파서가 그렇게 할 수있는 것은 아닙니다.


거의 작동하지만 예제에서도 새로운 attr이 아닌 url을 제목 attr로 인코딩하여 렌더링합니다 (소스를 보거나 html로 노드 편집). <a href="https://example.org/" rel="nofollow" title="title&quot; target=&quot;_blank">Link</a>
Graham P Heath

6

쉽게 할 수있는 방법은 없으며 @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/


0

PHP를 사용하여 markdown을 구현하려고 할 때이 문제가 발생했습니다.

마크 다운으로 생성 된 사용자 생성 링크는 새 탭에서 열어야하지만 사이트 링크는 탭으로 유지되어야하므로 마크 다운을 변경하여 새 탭에서 열리는 링크 만 생성했습니다. 따라서 페이지의 모든 링크가 링크되지 않고 마크 다운을 사용하는 링크 만 있습니다.

markdown에서 나는 모든 링크 출력을 <a target='_blank' href="...">찾기 / 바꾸기를 사용하여 충분히 쉬운 것으로 변경했습니다.


0

하나의 브라우저 탭 내에 머무르는 것이 더 나은 사용자 경험이라는 데 동의하지 않습니다. 사람들이 귀하의 사이트에 머 무르거나 다시 기사를 읽도록하려면 새 탭으로 보내십시오.

@ davidmorrow의 답변을 바탕 으로이 자바 스크립트를 사이트에 던져 넣고 외부 링크 만 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>


0

알렉스가 답변 함 (Dec 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';
        } 
    }
}

0

GNU sed & make를 사용하여 외부 링크에 대해서만 자동화

모든 외부 링크에 대해 체계적 으로이 작업을 수행하려는 경우 CSS는 옵션이 없습니다 . 그러나 sedMarkdown에서 (X) HTML을 만든 후에 다음 명령을 실행할 수 있습니다 .

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

위에 sed명령을 추가하여 더 자동화 할 수 있습니다 makefile. 자세한 내용은 GNU를 참조 make하거나 내 웹 사이트 에서 GNU를 수행 한 방법을 참조하십시오 .


당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.