Make Links Open in New Windows/Tab for Markdown

Fei Ye

2019/02/22

Creating (static) webpages using markdown is every convenient, for example

[Queensborough Community College](http://www.qcc.cuny.edu).

However, left clicking a link by default opens it in the same window. If there are only a few links, one may use html codes to open a link in a new window, for example

<a href="http://www.qcc.cuny.edu" target="_blank">Queensborough Community College</a>.

When there are many links it will be a little bit painful to create such links using html in a markdown file. I expected a few lines of CSS code will do the job. Indee, CSS3 does have a target-new property, which is unfortunately not supported by any major browsers yet. Another solution I found is to use jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
  	$(document).ready(function() {
  		$( '.main-body a[href^="http"]' )
        .attr( 'target','_blank' )
  		;
  	});
</script>

<script>
  	$(document).ready(function() {
  		$( '.main-body a[href^="http"]' )
        .attr( 'target','_blank' ).attr('title','This link will open in a new window.')
  		;
  	});
</script>

<script>
  	$(document).ready(function() {
  		$( '.main-body a[href^="http"]' ).not('a[href*=keywork]').add('a[href*=pdf]')
        .attr( 'target','_blank' ).attr('title','This link will open in a new window.')
  		;
  	});
</script>

Kramdown supports it in the following way:

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

  1. The jQuery solution was inspired by the post Make External Links Open In New Windows of Charles Wyke-Smith and the answer of gion_13 to this question jQuery add target=“_blank” for outgoing link on stackoverflow. ↩︎

Edited on 2025/03/04