Marked Custom

marked를 wikinote에 사용하면서 몇몇 기능들이 없다는 것을 깨달았다. 이 기능들은 사실 marked에는 들어가기에 애매한 기능들인데 왜냐면 그 기능들은 오직 위키작성시에 유용하지 일반적인 상황에서는 효과적이지 않기 때문이었다. 예를 들어 외부링크를 새창으로 여는 기능은 위키에서는 매우 유용하지만 어떤곳은 그런 기능이 오히려 필요없을수도 있다. 또 footnote는 extended markdown에는 정의된 기능이지만 생각보다 많이 활용되지는 않는 기능이다. 이런 기능들은 option으로는 제공되지 않기 때문에 직접 customize 하거나 혹은 직접 구현해야 한다.

외부링크 새창으로 연결하기¹

marked는 외부링크를 새창으로 열어주는 기능이 없다. 정확하게는 새창으로 열리게끔 Rendering해주지 않는다. 하지만 marked의 Renderer는 확장 가능하도록 설계되어 있기 때문에 Link의 Rendering만 재정의 해서 해당 기능을 구현할수 있다. marked의 Renderer를 재정의 하기 위해서는 우선 새로운 Renderer 객체를 만들어야 한다.

var myRenderer = new marked.Renderer();

원래 Render의 링크 렌더링 코드는 정말로 단순하게 작성되어 있다.

myRenderer.link = function(href, title, text) {
	return '<a href="'+href+'" title="'+title+'">'+text+'</a>';
}

이 코드의 href를 검사하여 외부링크라면 target을 _blank로 지정하도록 만들면 외부링크는 자동적으로 새창으로 열리게 된다. 외부링크를 검사하는 방법은 여러가지가 있겠지만 가장 간단하게는 맨앞의 프로토콜 부분을 검사하는 방법일것이다. 외부링크로 열어야 하는 프로토콜은 (아마도) http와 https이므로 이 둘을 판별할수 있는 Regexp를 작성하여 외부링크를 판별하게 한다.

var customRender = new marked.Renderer();
var protocolRegexp = /^https?:\/\/.+$/;
customRender.link = function(href, title, text){
	var external = protocolRegexp.test(href);
	
	return "<a href=\"" + href + "\"" +
 		(external ? " target=\"_blank\"" : "")+
	 	(title ? " title=\"" + title + "\"" : "") +
 		">" + text + "</a>";
}

이 렌더러를 option으로 넣어주면 된다.

marked.setOptions({
	renderer : externalLinksRenderer
});

작성중