Egloos에 markdown 적용하기 by 오리대마왕


최근에 [markdown](http://daringfireball.net/projects/markdown)에 대해 [알게되었다](http://yongyeol.com/blog/entry/textcube-1-6-and-markdown?TSSESSIONyongyeolcom=274868eb229698fa78962e69215de383). 내가 딱 원하는 그런 간결한 문법이다.

이걸 egloos에 어떻게 적용할 수 있을까 생각하다 찾아보니 [showdown]이라는, javascript로 구현한 [markdown] parser(라고 해야 할까나?)가 있어 얼른 적용해봤다. egloos는 원래 script tag를 지원하지 않으므로, 꽁수를 좀 부렸다.

1. [showdown] 을 다운로드 받아 적절한 곳에 upload한다. 물론 egloos 자체 파일 upload를 사용할 수도 있다.
2. egloos 스킨 편집으로 가서, upload한 [showdown] js를 불러들인다. 여기에 꽁수가 필요하다. 보안상 위험할 수 있으므로 꽁수는 비공개. 이미 널리 알려질 대로 알려졌을 듯?
4. 모든 post 내용에 적용되게 할 수도 있지만, 기존 글과의 충돌 때문에 일단은 markdown 이라는 이름의 div 안에서만 작동하도록 했다.

<div name="markdown">
내용을 넣으세요.
</div>

5. egloos가 모든 line break를 <br>로 바꾸므로 문제가 발생한다. 또한 markdown에서 blockquote를 위한 > 표시를 &gt;로 바꿔버린다. 따라서 이걸 도로 바꿔줄 필요가 있다.
6. 위의 내용을 반영하여 다음의 코드를 추가로 넣었다. 물론 이것도 script 태그 안에서 돌아야 하므로 여기서도 꽁수가 필요하다.
7. 다음은 markdown 몇몇 tag에 대한 test 이다.

## showdown test ##

what
===========

a
**wow**

> this is blockquote.
> how to quote???

int i=0;
int j=0;

[markdown]: http://daringfireball.net/projects/markdown
[showdown]: http://attacklab.net/showdown/


자꾸 markdown의 <code> 가 엉켜서 code 부분만 markdown 밖으로 옮겼다. 누가 문제지? 흠..
1. egloos template 변경
<script>
// http://www.dreamincode.net/code/snippet293.htm
function getElementsByName_iefix(tag, name) {

var elem = document.getElementsByTagName(tag);
var arr = new Array();
for(i = 0,iarr = 0; i < elem.length; i++) {
att = elem[i].getAttribute("name");
if(att == name) {
arr[iarr] = elem[i];
iarr++;
}
}
return arr;
}
function HTMLCleaner(targetElem)
{
var markdownText = targetElem.innerHTML.replace(/(<br\s?\\?>)|(<BR\s?\\?>)/g,"\n");
markdownText = markdownText.replace(/&gt;/g,">");
return markdownText;
}

var converter = new Showdown.converter();
var textList = getElementsByName_iefix( "div", "markdown");
if( textList.length )
{
for( var i=0; i< textList.length; i++ )
{
//alert(converter.makeHtml(textList[i].innerHTML));
textList[i].innerHTML= converter.makeHtml( HTMLCleaner( textList[i]) );
}
} else if (textList)
{
textList.innerHTML= converter.makeHtml( HTMLCleaner( textList) );
}
</script>

2. markdown test code 원본
## showdown test ##

what
===========

a
**wow**

> this is blockquote.
> how to quote???

int i=0;
int j=0;



@아, egloos 에 code 넣기 너무 어렵다.
@Bug인지, IE와 FF에서 표시가 다르다. FF에서는 code 블럭이 제대로 나오는데, IE에서는 일반 text 로 나온다. line break도 좀 이상한 듯 하고, &nbsp;에 대한 처리도 필요할 듯 하네. 뭐 이래! ㅋㅋ

핑백

  • markdown 이야기 &#8212; Resistan.com 2008-12-01 16:42:02 #

    ... , Markdown (How to edit pages) markdown 사용, 여러 프로그램 지원 블로그, HTML 글쓰기의 기술 텍스트큐브 1.6, Markdown egloos에 markdown 적용하기 Markdown의 고급활용 PS. Markdown이라는 이름이 Markup의 반대말처럼 느껴지는 건 나뿐일까? 작성일 2008년 12월 1일, 월요일 오후 2 ... more

덧글

  • 최재훈 2008/04/28 12:55 # 삭제

    MarkDown 쓰세요? 전 tag가 손에 익어버려서 큭.
  • 오리대마왕 2008/04/28 13:00 #

    조금 써 보니 아주 맘에 드네요. wiki 문법도 좋아했는데, 이건 간결하니 더 좋아요. tag는 너무 귀찮아요...

    다른 것 보다도 여러 링크들의 target url을 한군데서 정의할 수 있어서 아주 좋습니다.
※ 로그인 사용자만 덧글을 남길 수 있습니다.