programing

Markdown에서 'target="_blank'로 링크를 만들 수 있습니까?

padding 2023. 4. 13. 20:39
반응형

Markdown에서 'target="_blank'로 링크를 만들 수 있습니까?

Markdown에서 새 창에 열리는 링크를 만드는 방법이 있습니까?그렇지 않은 경우 어떤 구문을 사용하는 것이 좋습니까?사용하는 마크다운 컴파일러에 추가합니다.난 그게 선택사항이 되어야 한다고 생각합니다.

Markdown 구문에 관한 한 자세한 내용을 알고 싶다면 HTML을 사용해야 합니다.

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

내가 본 대부분의 Markdown 엔진은 일반적인 텍스트 마크업 시스템으로는 잘라낼 수 없는 이런 상황에서만 평이한 오래된 HTML을 허용한다.(예를 들어 StackOverflow 엔진)그런 다음 Markdown 전용 문서도 XSS 공격을 쉽게 포함할 수 있으므로 HTML 화이트리스트 필터를 통해 전체 출력을 실행합니다.따라서 사용자 또는 사용자가 다음을 생성하려는 경우_blank아마 아직 할 수 있을 거예요

자주 사용하는 기능이라면 독자적인 구문을 작성하는 것이 좋을지도 모르지만, 일반적으로 중요한 기능은 아닙니다.새 창에서 링크를 실행하려면 직접 클릭해 보겠습니다.

크램다운이 그걸 지원해요.표준 Markdown 구문과 호환되지만 확장자도 많습니다.다음과 같이 사용할 수 있습니다.

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

마크다운 기능은 없는 것 같습니다만, JavaScript로 자신의 사이트 밖에 있는 링크를 자동적으로 여는 경우는, 다른 옵션을 사용할 수 있습니다.

Array.from(javascript.links)
    .filter(link => link.hostname != window.location.hostname)
    .forEach(link => link.target = '_blank');

jsFiddle.

jQuery를 사용하는 경우:

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

jsFiddle.

Markdown v2.5.2에서는 다음을 사용할 수 있습니다.

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

따라서 마크다운 URL에 링크 속성을 추가할 수 없는 것은 아닙니다.Atribut을 추가하려면 사용되는 기본 마크다운파서와 그 내선번호를 확인합니다.

특히, 에는 enable로 하는 확장이 있어 링크에서 마크업을 할 수 있습니다.

[Hello, world!](http://example.com/){target="_blank"}
  • R에서 오신 분(예:rmarkdown,bookdown,blogdown등)이 구문은 다음과 같습니다.
  • R 를 사용하지 않는 경우는, 다음의 콜로 내선 번호를 유효하게 할 필요가 있습니다.pandoc와 함께+link_attributes

메모: 이는 파서의 지원과는 다릅니다.이것은 상기의 답변 중 하나입니다.특히 kramdown은 콜론이 필요하기 때문에 pandoc과는 다릅니다.:--컬리 괄호 선두에 --{} 예 , ) 。

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

특히:

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

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

중 는 '''를 붙이는 입니다.<base target="_blank">★★★★★★★★★★★★★★★★★★★★★★★★에<head>요소.이를 통해 모든 앵커 요소에 기본 타겟이 효과적으로 추가됩니다.워드프레스 기반의 웹 사이트에 콘텐츠를 작성하기 위해 마크다운을 사용하고 있으며, 테마 커스터마이저는 그 코드를 모든 페이지의 맨 위에 삽입할 수 있습니다.테마가 그렇지 않으면 플러그인이 있습니다.

단도직입적인 대답은 아니지만, 결국 여기 오게 되는 사람들을 도울 수 있을 겁니다.

GatsbyJS를 사용하는 경우 자동으로 추가되는 플러그인이 있습니다.target="_blank"외부 링크에 접속합니다.

이것은 개츠비-리마크-외부 링크라고 불리며 다음과 같이 사용됩니다.

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)

다음과 같이 네이티브 Javascript 코드를 사용하여 실행할 수 있습니다.

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

JSFidle 코드

프로젝트에서는 다음과 같은 작업을 수행하고 있으며, 정상적으로 작동합니다.

[Link](https://example.org/ "title" 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/

글로벌()pandoc 솔루션을 찾고 있는 경우.

Pandoc Lua 필터 사용

Pandoc Lua 필터를 직접 작성하여target="_blank"든든: :

  1. 를 들어, 「Pandoc Lua」라고 .links.lua
function Link(element)

    if 
        string.sub(element.target, 1, 1) ~= "#"
    then
        element.attributes.target = "_blank"
    end
    return element

end
  1. 해 주세요._output.yml
bookdown::gitbook:
  pandoc_args:
    - --lua-filter=links.lua

「」를 <base target="_blank">

대체 솔루션은 HTML에 삽입하는 것입니다.head다음 옵션을 사용하여 섹션을 표시합니다.

  1. 파일을 (예: 파일 이름). 예를 들어 이름을 지정합니다.links.html
<base target="_blank">
  1. 해 주세요._output.yml
bookdown::gitbook:
  includes:
    in_header: links.html

이 hash: 이솔 for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for)의 새로운 탭도 열 수 .# "/URL. 하여 이 이 없습니다.저는 이러한 URL을 사용하여 이 솔루션을 테스트한 적이 없습니다.

라라벨에서는 이렇게 해결했다.

$post->text= Str::replace('<a ', '<a target="_blank"', $post->text);

특정 링크에서는 동작하지 않습니다.마크다운 텍스트의 모든 링크를 편집합니다.(저 같은 경우에는 괜찮습니다)

PHP를 사용하여 마크다운을 실행하려고 할 때 이 문제가 발생하였습니다.

마크다운으로 작성된 사용자가 생성한 링크를 새 탭에서 열어야 하지만 사이트 링크는 탭에 있어야 하므로 새 탭에서 열리는 링크만 생성하도록 마크다운을 변경했습니다.페이지 상의 모든 링크가 링크아웃되는 것이 아니라 마크다운을 사용하는 링크만 링크아웃됩니다.

에서는 모든 을 「다보다」로했습니다.<a target='_blank' href="...">찾기/교체도 간단합니다.

하나의 브라우저 탭 내에 있는 것이 더 나은 사용자 환경이라는 것에 동의하지 않습니다.사용자가 사이트에 머무르거나 기사를 다 읽으려면 새 탭으로 전송하십시오.

@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]=paramprop]를 사용하여 임의의 속성을 추가할 수 있습니다."}

예를 들어 [Google](http://www.google.com){target="_blank"}

완료된 Alex에 대한 답변(2010년 12월 13일)

보다 스마트한 주입 타깃은 다음 코드를 사용하여 수행할 수 있습니다.

/*
 * 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?)group constructure (여기서 regexp를 이해해주세요.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를 사용할 수 없습니다.단, (X)가 실행되면 다음 명령을 실행할 수 있습니다.HTML이 Markdown에서 생성되었습니다.

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

은 위의 항목을 할 수 있습니다.sedmakefile상세한 것에 대하여는, GNU 를 참조하거나, Web 사이트에서 그 방법을 참조해 주세요.

특정 링크에서만 이 작업을 수행할 경우 다른 사용자가 응답한 대로 인라인 속성 목록 구문을 사용하거나 HTML만 사용하십시오.

된 모든 에서 이 <a>태그는 마크다운 컴파일러에 따라 다르므로 확장자가 필요할 수 있습니다.

요즘 블로그를 위해서 하고 있는데pelican 쓰이고 있어요.Python-MarkdownPython-Markdown Phuker/markdown_link_attr_modifier는 정상적으로 동작합니다.오래된 내선번호가newtabPython-Markdown 3 。을 사용하다

★★★의 React+Markdown★★★★

재사용 가능한 구성 요소를 만들었습니다.

export type TargetBlankLinkProps = {
  label?: string;
  href?: string;
};

export const TargetBlankLink = ({
  label = "",
  href = "",
}: TargetBlankLinkProps) => (
  <a href={href} target="__blank">
    {label}
  </a>
);

새 창에서 열리는 링크가 필요한 곳이면 어디서든 사용할 수 있습니다.

MUI v5를 사용한 "마크다운에서 jsx"의 경우

이 방법이 효과가 있는 것 같습니다.

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>

[Page Link] (여기 URL ("target|_blank"))로 동작합니다.

언급URL : https://stackoverflow.com/questions/4425198/can-i-create-links-with-target-blank-in-markdown

반응형