EditPlus에서 마크다운 사용하기

마크다운

요즘 내가 관심을 가지고 있는 주제 중 하나는 생각의 흐름을 끊지 않고 마크업할 수 있는 '마크다운'(Markdown)이다. 글을 입력하면서 바로 HTML 태그를 입힐 수 있기 때문에 글을 쓰는 것이 정말 편하다. 이렇기 때문에 이미 마크다운 문법을 번역했고 사용자들이 쉽게 이해할 수 있도록 마크다운을 소개했다. 그러나 역시 가장 큰 불만은 EditPlus에서 마크다운을 사용할 수 없다는 점이다. <사진: wmd editplus로 검색하면 나오는 짤방. 게임과 관련된 짤방인데 게임을 하지 않는 나로서는 왜 이 짤방이 등장하는지는 알 수 없다.>

목차

마크다운

요즘 내가 관심을 가지고 있는 주제 중 하나는 생각의 흐름을 끊지 않고 마크업할 수 있는 (Markdown)이다. 글을 입력하면서 바로 HTML 태그를 입힐 수 있기 때문에 글을 쓰는 것이 정말 편하다. 이렇기 때문에 이미 마크다운 문법을 번역했고 사용자들이 쉽게 이해할 수 있도록 마크다운을 소개했다. 그러나 역시 가장 큰 불만은 EditPlus에서 마크다운을 사용할 수 없다는 점이다.

편집기로 편집하고 미리보기에서 마크다운을 변환한 결과를 바로 보면 좋을텐데 이렇게 할 수 있는 마땅한 방법이 없었다. 에디트 플러스 위키에는 펄(Perl)로 작성된 마크다운을 내려받아 펄로 렌더링한 결과를 보여 주는 방법 밖에 없었다. 결국 마크다운 문법과 미리보기를 지원하는 편집기를 찾아봤다. 그러나 알게된 프로그램이 바로 WMD라는 자바스크립트 기반의 마크다운 편집기였다.

WMD는 자바스크립트로 마크다운을 변환하는 Showdown.js와 웹에서 마크다운을 편하게 입력할 수 있도록 하는 마크다운 편집기, WMD가 포함되어 있었다. 또 사용자가 마크다운을 웹에서 연습할 수 있도록 간단한 데모와 마크다운을 입력하면 바로 옆에 변환된 결과를 보여 주는 고급 데모를 포함하고 있었다. 고급 데모를 이용하다 보니 갑자기 더 좋은 생각이 떠 올랐다.

에디트플러스에 마크다운 적용하기

고급 데모를 응용하면 에디트 플러스에서도 자연스럽게 마크다운으로 작성된 글을 미리 볼 수 있을 것이라는 생각이었다. 에디트플러스는 0.9x대 부터 사용한 편집기이고 비트컴퓨터에서 강의할 당시 수강생들에게 소개, 비트컴퓨터에서 라이선스를 구입했던 편집기이다. 이런 영향인지 모르겠지만 국내 웹 개발자 중 상당수가 사용하는 편집기이다. 또 내가 글을 쓸 때 가장 자주 사용하는 편집기라 더 없이 좋았다. 적용하는 방법은 다음과 같다.

  1. '파일/열기' 메뉴(Ctrl-O)를 클릭한 뒤 다음 파일을 불러 온다.

    <editplus 설치 폴더>\template.html
    
  2. template.html의 내용을 다음 내용으로 바꾸고 '파일/저장' 메뉴를 이용해서 저장한다.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title> New Document </title>
    <meta NAME="Generator" CONTENT="EditPlus">
    <meta NAME="Author" CONTENT="">
    <meta NAME="Keywords" CONTENT="">
    <meta NAME="Description" CONTENT="">
    <script type="text/javascript"  src="http://box1.wmd-editor.com/1/wmd.js"></script> 
    <style>
    #rightContainer {margin: 0;padding: 0;position: relative;width: 100%;}
    #leftContainer {display: none;}
    #outputPane {display: none;}
    div.pane {overflow: auto;}
    #previewPane > :first-child {margin-top: 0;}</style>
    </head>
    <body><div id="leftContainer"><textarea id="inputPane" cols="80" rows="20" class="pane">
    ^!
    </textarea></div><div id="rightContainer"><textarea id="outputPane" class="pane wmd-output" cols="80" rows="20"></textarea><div id="previewPane" class="pane wmd-preview"></div></div>
    </body>
    <div id=image style="Z-INDEX: 100; LEFT: 0px; VISIBILITY: hidden; POSITION: absolute; TOP: 0px">
    <table cellSpacing=0 cellPadding=2 width="100%"  style='margin: -2 -2 -2 -2'>
    <tr><td vAlign=top align=left>
    <a href="javascript:" onClick=hideImage() class=none><img src="/images/clearpixel.gif"  name=bigimage ></td></tr>
    </table>
    </div>
    </html>
    

팁을 적용한 뒤 '파일/새 파일/HTML'을 선택하고 글을 입력한 뒤 '미리보기' 단추를 클릭하면 그림처럼 입력된 마크다운이 자동으로 렌더링되서 표시되는 것을 알 수 있다.

WMD 소개

WMD티스토리에 적용하는 방법은 나중에 설명하기로 하고 여기서는 WMD의 간단한 기능을 소개하겠다. WMD은 입력한 내용을 바로 확인할 수 있는 문맥 기반의 웹 편집기로 다음과 같은 기능을 제공한다.

  • 키보드 바로가기
    글을 빠르게 입력할 수 있도록 다음과 같은 바로 가기를 지원한다.

    - Ctrl+B (**굵게**)
    - Ctrl+I (*기울게*)
    - Ctrl+K (`코드`)
    
  • 자동 들여쓰기
    새로운 줄을 시작하려면 목록 끝에서 Shift+Enter를 누른다. 이 바로 가기는 인용과 코드에서도 동작한다.

  • 마크다운 중복
    각각의 마크다운 요소내에 마크다운 요소를 두는 것도 가능하다. 예를들어 목록을 선택하고 인용 목록을 만들기 위해 인용 단추를 누를 수 있다.

  • 마크다운 직접입력
    에디터 출력에는 어떤 마술도 없다. 단지 표준 마크다운 입력으로 쓰면 된다. 또 마크다운 단추를 사용하는 대신에 직접 마크다운 명령을 입력해도 된다.

  • 깔끔한 처리
    마크다운을 이용해서 인용 부호를 입히면 자동으로 줄 바꿈 해준다. 또 같은 방법으로 인용 부호를 제거하면 자동으로 줄 바꿈 기호를 제거해 준다. 따라서 글을 인용할 때 일부러 줄바꿈하고 인용 부호를 제거하느라 줄바꿈 문제를 제거할 필요가 없다.

관련 글타래

글쓴이
author image
운영체제의 모든 것을 운영하고 있는 IT 블로거. IT 블로거라는 이름은 현재 시국때문에 시사 블로거로 바뀐 상태다. 그러나 나는 아직도 시사와 사회에 관심이 많은 IT 블로거일 뿐이다. 컴퓨터, 운영체제, 시사, 가족, 여행, 맛집, 리뷰등과 살면서 느끼는 소소한 일상이 블로그의 주제이다. 왼쪽의 아이콘은 둘째 딸 다예가 그린 내 모습이다.
2009/06/18 17:17 2009/06/18 17:17
오늘의 글
인기있는 글
조회수 많은 글 | 베오베
댓글 많은 글 | 베오베

Trackback

Trackback Address :: https://offree.net/trackback/2607

  1. Subject : 위지윅에디터의 사용성

    Tracked from UIX 2009/06/18 20:51 del.

    블로그에 포스팅하거나 게시판등에 글을 올릴때 사용하는 위지윅에디터 사용하기 편하신가요? 티스토리 글쓰기 위지윅에디터 언젠가 ‘위지윅에디터 모드’를 브라우저에서 지원하기 시작하

  2. Subject : HTML이 싫으면 마크다운 문법과 위지윔 에디터로!

    Tracked from String's IT & Science 2009/08/12 13:26 del.

    안녕하세요, 오늘은 마크다운(Markdown)과 위지윔 에디터(The Wysiwym Markdown Editor)에 관해서 쓰겠습니다. 블로거들이 일반적으로 쓰는 위지윅 에디터는 겉보기에는 안정적이게 보이지만 HTML면에서 ?

  3. Subject : 설치형 블로그에서 마크다운 쓰기

    Tracked from 삼각형, IT 그리고 오토잇 2009/11/27 00:27 del.

    필자는 마크다운을 사용한다. 이유는 HTML을 잘 못해서가 아닌, 이름 그대로 생각을 끊지 않고 써내려가면서 서식을 적용할 수 있기 때문이다. 만일 설치형 블로그라면 대부분 php기반의 플러그?

  4. Subject : Notepad++에서 마크다운 사용하기

    Tracked from 아르의 운이 좋아지는 블로그 2010/04/18 10:33 del.

    왜 마크다운인가? 블로그를 나름 운영한다고는 하지만 , 써야 될 글을 바로 안쓰고 미루는 상황이 계속되면서, 왜 그런지 곰곰히 생각해보니 이제까지 HTML만을 이용해서 너무 힘들게주1 글을 써

Facebook

Comments

  1. 아지 2009/06/18 20:54

    우리나라는 너무 무분별하게 위지윅에디터가 사용되는 경향이 있는것 같습니다.
    이런때에 또 다른 형태의 사용성의 뛰어난 웹편집기가 소개가 되어 기쁘군요^^ 많은 분들이 보시고 또 다른 경험을 해볼수 있으면 좋겠습니다. 그런이유로 어제에 이어 같은글 트랙백 겁니다~

    perm. |  mod/del. reply.
    • 도아 2009/06/19 10:37

      초보자에게 좋다는 것이 이유인데 그로 인한 피해는 만만치 않습니다. 대역폭부터 잡아먹으니까요.

  2. CaN Tips 2009/06/18 21:22

    좋은 글 감사합니다. 공부가 많이 되었습니다.

    perm. |  mod/del. reply.
  3. 아리수 2009/06/19 09:08

    좋은 글 감사합니다.

    근데 제 경우에는 에디트플러스에서 사용하는 방법 중 마지막에 미리보기를 하니깐 wmd소개하는 부분에 나온 그림처럼 표시가 되네요....
    좋은 걸 알려줘도 사용을 못하네요...^^;...

    내용 추가합니다.--------
    template.html에서 ^!표시가 있는 곳의 p 태그의 를 없애고 미리보기를 하니깐 WMD소개한 부분에 나온 이미지와 같이 textarea가 두개 표시 되고 맨아래에 마크다운으로 랜더링된 내용이 나오네요....

    perm. |  mod/del. reply.
    • 도아 2009/06/19 09:36

      태그는 모두 없애야 합니다. 마크다운과 문법강조 플러그인의 충돌로 엉뚱한

      <

      p>태그가 추가된 것입니다.

    • 아리수 2009/06/19 10:31

      아.. 그렇군요...

      감사합니다.

  4. 김한조 2009/06/19 10:29

    좋은 글 감사합니다. 그런데, 마크다운 글을 html 렌더링으로 미리보기를 할 필요가 있는건가요? 저는 마크다운 문서의 가장 큰 장점이, '렌더링하지 않아도 충분히 보기 좋은 가독성'에 있다고 생각해 왔거든요. 비록 블로그에 포스팅할 때는 여러 가지 이유 때문에 html로 변환을 해서 올리기는 하지만, 글을 쓰고 나면 .markdown 확장자를 붙여서 저장해 둡니다. 이게 익숙해지면 미리보기 같은거 도리어 귀찮아지더라구요.... 어쨌든 좋은 정보 감사드립니다. ^^

    perm. |  mod/del. reply.
    • 도아 2009/06/19 10:32

      그 자체가 가독성이 좋지만 웹으로 올렸을 때와 차이가 있고 마크다운 외에 HTML도 사용하니 미리보기를 할 수 있는 것이 훨씬 좋죠. 저 역시 익숙합니다만 미리보기는 필요하더군요. 태그를 사용하지 않으면 미리보기는 필요가 없습니다.

  5. 공상플러스[▶◀] 2009/06/20 17:15

    왜자꾸 도아님 블로그가 데이터베이스 접속 오류가 뜨죠?

    perm. |  mod/del. reply.
  6. EmilyJ 2009/06/22 21:01

    wmd 티스토리에 적용하는 방법좀 알려주세요
    티스토리에 적용 시도하다 실패 했거든요;;;

    perm. |  mod/del. reply.
    • 도아 2009/06/23 09:20

      본문에 있듯이 따로 글을 올릴 생각입니다. 댓글로 알려 줄 수 있는 것은 아니니까요.

  7. 스트링 2009/08/11 17:46

    좋은 정보 감사합니다^^
    염치없지만 WMD를 티스토리에 적용하는 방법좀 알려주시면 안될까요?
    아무리 찾아봐도 안되서요.

    perm. |  mod/del. reply.
    • 도아 2009/08/12 07:37

      본문에 있지만 나중에 올릴 생각입니다.

(옵션: 없으면 생략)

글을 올릴 때 [b], [i], [url], [img]와 같은 BBCode를 사용할 수 있습니다.