[MARKDOWN×JQUERY] 마크다운으로 만든 링크를 새 창에서 열리도록 하는 방법

문제 상황

저는 보통 워드프레스에서 마크다운을 사용해 글을 작성합니다. 저와 같은 분들이 많이 불편해 하는 것 중 하나가,

마크다운으로 링크를 만들면 그 링크를 새 창에서 열 수 없다

라는 것입니다.

조금 더 일반화 해서 써보자면 마크다운으로 아래와 같이 링크를 만드는데,

[링크 제목](링크 주소)

여기에 HTML 속성인 target="_blank"를 설정할 수가 없어서 사용자가 해당 링크를 클릭 했을 때, 새 창에서 열리도록 할 수가 없다는 것이죠.

하지만 언제나 그랬듯이 우리는 해답을 찾을 것입니다.

문제 해결

일단 마크다운으로 만든 링크를 새 창에서 열리도록 하는 방법은 아래와 같습니다.

1. 마크다운으로 링크를 만든다.
2. 링크에 class 를 추가한다.
3. jQuery 를 사용해 해당 class 를 가진 링크의 target 속성에 _blank 값을 넣어준다.

위 방법론을 조금 더 자세히 적어 보자면 아래와 같습니다.

마크다운 링크 만들기

마크다운을 조금만 써보신 분들한테는 링크 하나 만드는 것 쯤은 문제도 아닐 것입니다.

[예제 링크](https://www.example.com/)

링크에 클래스 추가하기

이제 위 링크에 클래스를 추가 해볼까요?

[예제 링크](https://www.example.com/) {.outlink}

여기까지 어렵지 않죠? 많은 제약이 있는 마크다운이지만 a 태그에 id 또는 class 정도는 지정 할 수 있습니다.

위 코드로 생성된 a 태그는 아래와 같을 것입니다.

<a href="https://www.example.com/" class="outlink">예제 링크</a>

이제 그 다음으로 해당 페이지의 어딘가에 아래와 같은 jQuery 스크립트를 넣어줍시다.

<script>
jQuery( document ).ready( 
    function() { 
        jQuery( "a.outlink" ).attr( "target", "_blank" ); 
    } 
);
</script>

대충 보니 각이 나오죠?

1. jQuery( document ).ready : 문서 로드가 끝나면
2. jQuery( "a.outlink" ) : a 태그 중 outlink 라는 클래스를 가진 태그를 찾아서
3. .attr( "target", "_blank" ) : target 속성에 _blank 값을 넣어라

라고 명령해 주는 것입니다.

저는 워드프레스 테마도 직접 만들어서 사용하기 때문에, 위 jQuery 스크립트를 </body> 태그 다음에 바로 그냥 삽입해주었습니다. 고급 유저분들은 따로 삽입하는 스크립트 코드가 있다면 거기에 추가해주거나 하면 되겠네요.

---

매우 간단한 아이디어인데, 그동안 이걸 왜 생각해내지 못 했을까 후회가 되네요.

끝.