Markdownで「target =“ _ blank”」のリンクを作成できますか?


462

Markdownで新しいウィンドウで開くリンクを作成する方法はありますか?そうでない場合、どの構文を使用することをお勧めしますか。使用するマークダウンコンパイラに追加します。オプションだと思います。


答えで指摘されているように、それはマークダウンの機能ではありません。これをリンク先のサイト全体のデフォルトにしたい場合は、David Morrowが答えを持っています。または、1つのインスタンスでそれを実行したいだけの場合は、実際にHTMLで記述する必要があるとMatchuの回答は述べています。
JGallardo 2013年


あなたの質問はあなたが何をしているのかについて特定ではありませんが、作成しているリンクが別のドメインを指していることを認識し、それらを新しいタブで開くマークダウンエンジンまたはブラウザー(どちらかはわからない)があります。私にとって、必要な機能を得るには、sを削除するhttps:だけで十分な場合があります。
ジョシュガスト

回答:


379

Markdown構文に関する限り、詳細を知りたい場合は、HTMLを使用する必要があります。

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

私が見たほとんどのMarkdownエンジンは、このような一般的なテキストマークアップシステムではカットされない状況のために、プレーンな古いHTMLを許可します。(たとえば、StackOverflowエンジン)。MarkdownのみのドキュメントでさえXSS攻撃を簡単に含むことができるため、HTMLホワイトリストフィルターを介して出力全体を実行します。そのため、あなたやユーザーが_blankリンクを作成したい場合でも、おそらくリンクは作成できます。

それが頻繁に使用する機能である場合は、独自の構文を作成することは理にかなっていますが、一般的に重要な機能ではありません。そのリンクを新しいウィンドウで起動したい場合は、Ctrlキーを押しながらクリックします。


19
知ってる?私はあなたとアレックスに同意します。全然使わないことにし_blankました。1つのブラウザーで物事を維持する方がユーザーエクスペリエンスが優れています。彼らはあなたが言うように、ただ打ち返すか、コマンドクリック(ここではMacユーザー:))することができます。
ma11hew28

1
ドメイン外のすべてのリンクに_blankを追加するページでJavaScriptを実行しています。@alexが次の回答で持っているように
David Silva Smith 14

3
私は(明示的でインラインで読めることを望んで)次の構文を提案します:[Visit this page](http::/link.com(開くというアイデアを得る。
オーガスティンリーディンガー、2015年

4
単純なtarget = "_ blank"は危険な場合があります!タグにrel = "noopener"も追加してください!(sites.google.com/site/bughunteruniversity/nonvul​​n/...
マックスVyaznikov

1
@MaxVyaznikov興味深い。ブラウザがログイン用のエッジポップアップウィンドウの上を提供する方が安全だと思いますか?WebサイトのログインUIを、「そっくり」なWebページによって作成されたなりすましおよび偽のログインUIから分離します。かつて困難だったところが、今はもっと可能かもしれません。
1.21ギガワット2017

351

Kramdownはそれをサポートしています。標準のMarkdown構文と互換性がありますが、多くの拡張機能もあります。次のように使用します。

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

7
これは、MacのMarkdownエンジンを使用すると機能しないようです:-(
Netsi1964

49
ジェキルとの相性抜群!
bholagabbar

1
kramdown構文:[リンク名](URL_LINK){:ターゲット=「_空白は」} kramdownオンラインエディタを使用してHTMLに解析することができます。 http://trykramdown.herokuapp.com/ 私はすでにかなりの数を持っていたので、私はそれを使用しましたkramdown参照、それらを再入力しないようにしたかった。
algoquant 2016年

4
これをデフォルトとして設定する方法がjekyllにありますか?私のブログ投稿のすべてのリンクを開くようにしたいtarget="_blank"
ahirschberg

10
動作しません。{:target = "_ blank"}をテキストとしてレンダリングするだけです。
ベニー

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にいる場合は、リンクを使用してフレームから飛び出す必要があります。
デビッドモロー

2
人を強制的に新しいウィンドウに入れるのは、外部のどこかにリンクしている文章の途中で、フローを中断することなくコメントのソースを提供したいときだけです。このjsスニペットは、目的に最適です-感謝、賛成:)
tehwalrus

14
ヤコブ・ニールソンからの引用はここではもう当てはまらないと思います。彼は新しいウィンドウを開くことについて不満を言っていますが、最近ではtarget = "_ blank"が代わりに新しいタブで開きます。個人的には、他のドメインへのリンクが新しいタブで開かない場合は気に入らない。
Alexander Rechsteiner 2013

3
また、言うことJakob Nielsen says you shouldn't do thatはひどい議論です。
Ola Tuvesson 2013

2
これはグローバルソリューションとしても望ましいことをここに付け加えます。MarkdownのポイントであるMarkdownをクリーンに保ちます。
アダムマイケルウッド

47

Markdown-2.5.2では、これを使用できます。

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

2
これを試してみましたが、うまくいきませんでした。django 1.6での使用
joel goldstick 2015

5
Jekyll v2.4.0で動作します(以前のバージョンでも動作する可能性があります)
nicksuch '

5
これはkramdownです(Jekyllはkramdownを使用しているため、Jekyllで動作します)。
z3ntu 2015年

1
この構文をGitLabで機能させることができないようです。Markdownのどのバージョンが現在使用されているかわかりません。
Rockin4Life33 2016

これをデフォルトにする方法はあるので、すべてのリンクに指定する必要はありませんか?
Connel、2017

8

グローバルソリューションの1つは<base target="_blank"> 、ページの<head>要素に配置することです。これにより、デフォルトのターゲットがすべてのアンカー要素に効果的に追加されます。私はマークダウンを使用して、WordpressベースのWebサイトにコンテンツを作成しています。テーマカスタマイザを使用すると、そのコードをすべてのページの上部に挿入できます。テーマがそれを行わない場合、プラグインがあります


8

私はGrav CMSを使用していますが、これは完全に機能します。

本文/内容:
Some text[1]

本文/リファレンス:
[1]: http://somelink.com/?target=_blank

ターゲット属性が最初に渡されることを確認してください。リンクに追加の属性がある場合は、それらを参照URLの末尾にコピーして貼り付けます。

直接リンクとしても機能します:
[Go to this page](http://somelink.com/?target=_blank)



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

したがって、Markdown URLにリンク属性を追加できないことは、必ずしも正しくありません。属性を追加するには、使用されている基になるマークダウンパーサーとその拡張機能を確認します。

特に、pandoc有効link_attributesにする拡張機能があり、リンクでのマークアップを許可します。例えば

[Hello, world!](http://example.com/){target="_blank"}
  • 来る人のためにR(使用して、たとえばrmarkdownbookdownblogdownなど)、これはあなたがしたい構文です。
  • Rを使用しない場合は、with の呼び出しで拡張機能有効にする必要がある場合がありますpandoc+link_attributes

注:これは、kramdownパーサーのサポートとは異なります。これは、上記で受け入れられた回答の1つです。- 、特に注目すべきpandocからkramdown異なり、それはコロンを必要とするのでそれで:-中括弧の開始時- {}例えば、

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

特に:

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

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

これは、私たちのカスタムマークダウン環境で機能しました。ありがとう!
クレウィス

6

これは、次のようなネイティブのJavaScriptコードを使用して行うことができます。

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

JSFiddleコード


6

私のプロジェクトではこれをやっていて、うまくいきます:

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

リンク

しかし、すべてのパーサーがそうできるわけではありません。


動作しますが、でも、あなたの例では、むしろ新しいATTRS(ソースを表示または編集HTMLなどのノード)としてよりも、タイトルのattrにエンコードされたURLにレンダリングほとんど: <a href="https://example.org/" rel="nofollow" title="title&quot; target=&quot;_blank">Link</a>
グラハムPヒース

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を使用するリンクだけがリンクアウトします。

マークダウンでは、すべてのリンク出力を変更しました<a target='_blank' href="...">。これは、検索/置換を使用すると十分簡単です。


0

私は、1つのブラウザタブ内に留まることがより良いユーザーエクスペリエンスであることに同意しません。他のユーザーにサイトに留まるようにしたい場合や、戻ってその記事を読み終える場合は、新しいタブで送信してください。

@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>


0

完成したアレックスの回答(10/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');

(?!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はオプションではありません。ただし、sed(X)HTMLがMarkdownから作成されたら、次のコマンドを実行できます。

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

これは、上記のsedコマンドをに追加することでさらに自動化できますmakefile。詳細については、GNUを参照してくださいmakeか、私はことを行っている方法を見私のウェブサイト


-3

これは私にとってはうまくいきます:[ページリンク](ここにあなたのURL "(target | _blank)")

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.