The Wysiwym Markdown Editor

아래 포스팅에서 Markdown 을 웹에서 편집 할 수 잇는 웹 에디터인 Markable 에 대해 소개 드린 적이 있는데요~

 

2014/06/03 - [유틸] - 괜찮은 Markdown Editor markable 과 Table 을 쉽게 생성 할 수 있는 tablesgenerator

 

오늘은 Markdown 웹 에디터에 대해 소개 드리려 합니다.

 

Markdown 을 사용하면 HTML 을 사용할 줄 모르는 사람들도 간단하게 HTML 코드를 생성 할 수 있는데요~

 

Markdown 의 기본적인 사용법은 아래 주소 참조 바랍니다.

 

http://blog.kalkin7.com/2014/02/05/wordpress-markdown-quick-reference-for-koreans/

 

Markdown 을 사용한다고 해서 HTML 의 모든 태그들을 생성 할 수 있는 것은 아닙니다.

 

즉 Markdown 을 사용해서 Check boxes, Drop down, Text fields, Radio buttons 등과 같은 태그들은 생성 할 수 없더군요.

 

Markdown을 사용하여 Check boxes, Drop down, Text fields, Radio buttons 등을 생설 할 수 있다면 좀더 편리할텐데 하는 생각으로 인터넷을 좀더 검색 해보니 아래 주소의 글들이 나오더군요.

 

http://brikis98.blogspot.kr/2011/07/proposal-extend-markdown-syntax-to.html

 

https://github.com/maleldil/wmd

 

위 주소의 github 주소에 들어가서~ 아래 그림과 같이 zip 파일을 다운로드 받습니다.

 

Readme.md 은 markdown 으로 되어 있습니다.

 

이전 포스팅에서 소개 드렸던 http://markable.in/ 을 통해 열어보시면~ 아래 그림과 같이 사용법에 대한 소개가 html 로 보이게 됩니다.

 

위 그림에서 보듯이 간단한 문법을 통해 Check boxes, Drop down, Text fields, Radio buttons 등을 생성 할 수 있습니다.

 

압축을 해제한 후 wmd-test.html 파일을 실행해 보면 다음 그림과 같은 화면이 열리게 됩니다.

 

readme 에서 설명한 데로 Check boxes, Drop down, Text fields, Radio buttons 들을 생성해 보죠~

 

제일 위 칸에 다음과 같은 코드들을 넣으면~

 

name = ___

sex = (x) male () female

phones = [] Android [x] iPhone [x] Blackberry

city = {BOS, SFO, (NYC)}

 

preview 에 Check boxes, Drop down, Text fields, Radio buttons 등이 나오고~

 

이렇게 간단하게 생성한 다음에 제일 밑에 output 으로 생성되는 HTML 코드를 복사해서 HTML 에디터에 붙여넣기 하면 되겠죠~