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.