마크다운(Markdown)으로 플리커 사이트(flickr.com)의 이미지 삽입하기

마크다운(Markdown)은 텍스트만 이용해서 구조적인 글을 쓰도록 도와주는 일종의 문법인데요, 저는 주로 개발 로그를 정리하거나 틈틈이 메모를 할 때 사용하고 있습니다. 물론 요즘은 블로그(kkamagui.tistory.com)에 글을 남길 때도 마크다운을 사용하고 있습니다. ^^;;;

마크다운을 처음 접하게 된 건 위키(Wiki) 때문이었는데요, 위키가 글을 엮기 편하고 문법 자체가 아주 간단해서 개발 로그를 남기는 데 그만이더라구요. 그래서 처음에는 설치형 위키인 도쿠 위키(Doku Wiki)를 썼는데요, 혼자 돌리기에는 왠지 무거운 느낌도 있고해서 위키패드로 갈아탔습니다. 위키패드를 써보니 기능도 만족스럽고 마음에 쏙 들더라구요. 그래서 위키패드로 글을 쓰기 시작하다가 위키 문법에 집착하게 되고, 이게 블로깅까지 이어지면서 결국 텍스트로 글쓰는 행위 자체에 집착하게 됐습니다. ㅠㅠ

마크다운을 즐겨 쓰시는 분들 중에는 저처럼 웹에 있는 위지윅(WYSWYG) 에디터가 불편한 분도 있으실 겁니다. 위지윅 에디터의 오류로 쓴 글이 날라가거나 굵게 한 글씨가 제대로 해제가 안되고 계속 굵게 나온다거나 하는 문제를 몇 번 겪고나니 의욕이 사그라들더라구요. ㅠㅠ 뭐, 마크다운으로 갈아탄 뒤에는 그런 일이 없어졌지만요. ^^)/~ 그래서 직접 글 쓰기 사이트(Writer's Note)도 만들어 쓰고 있습니다(개 밥 먹는 중이에요 ㅎㅎ).

제가 사실 이미지는 왠만하면 잘 안넣는데요, 그래도 가끔 필요한 경우가 있어서 제 티스토리 블로그(kkamagui.tistory.com)에 이미지를 올리고 그 링크를 가져와서 넣고 있습니다. 이미지를 많이 안 쓰다보니 별로 불편한 점을 모르고 있다가 오늘 문득 불편하다는 생각이 들더라구요. 그래서 어떻게 하면 좋을까 생각을 해봤는데, 플리커 같은 사이트에 블로깅용 이미지를 모아두고 링크를 거는 방법이 좋을 것 같더군요.

그런데 왠 걸~!! @0@)/~ 실제로 이미지를 올린 뒤에 링크를 아래처럼 걸어보니 정상적으로 표시되지 않는 겁니다. ㅠㅠ 분명히 플리커 사이트에서는 잘 표시되는데 말이죠. 한참을 고민하다가 저만 이런 문제를 겪는게 아닐 것 같아서 검색을 해봤더니~!! Wannabeman 님도 같은 문제로 문제를 겪으시다가 고생 끝에 찾은 방법을 공유해주셨더군요. 해결책은 markdown과-삽질한-하루에서 보실 수 있는데요, 결론만 말씀드리자면....

사진에서 공유 버튼을 누르면 .jpg로 끝나는 그림 링크가 나오는데요, 이 링크를 마크다운 문법으로 넣어주면 됩니다~!! >ㅁ<)~!!

마크다운으로 이미지를 삽입하는 방법은 사실 링크를 삽입하는 방법과 같은데, 차이점이라면 !를 앞에 붙여주는 정도입니다. 아래처럼 말이죠 ^^;;;

![이미지 대체 텍스트에요](http://farm6.staticflickr.com/5532/12181791906_1fd29764e7_o.jpg)

이미지 대체 텍스트에요

<이미지 출처-yes24.com>

아아... 진작 검색해볼 껄 그랬구요. ㅠㅠ 그래도 해결책을 찾았으니 다행이라는....

그럼 즐거운 하루 되세요 ^^

 

마크다운(Markdown)?

얼마 전에 마크다운(Markdown)이란 것을 새로 접했습니다. 위키처럼 텍스트 기반으로 편하게 문서를 작성할 수 있고, 문법 자체도 아주 직관적이어서 배우기 쉽더군요. 물론, 여기서 직관적이라는 건... 사람에 따라 조금 다르게 느낄 수도 있는 부분이지만, 위키를 한번 접해보신 분이라면 "아하~!!"라고 하실 겁니다.

그래서 루비 온 레일즈(Ruby on Rails)의 튜토리얼을 보고 간단하게 만든 사이트에 마크다운 파서인 레드카펫(Redcarpet)을 설치해서 마크다운 블로그를 만들었습니다.

사실 마크다운 형식으로 쓴 글을 파싱해서 보여주는 것이 전부라 블로그라고 하기도 좀 그렇지만... 일단 대략 완성되었으니 한번 공개해봅니다. ^^;;;; kkamagui의 마크다운 블로그로 바로가기~!! 간단 마크다운 문법 정리로 가면 마크다운 문법이 어떤 것이고 어떻게 보이는지를 간단히 확인할 수 있으니 궁금하시면 한번 들러보시기 바랍니다. ^^;;;

새로 만든 블로그에 글을 적다보니 약간 불편한 점이 있더군요. 글 쓰는 것 자체는 편해졌는데, 단지 웹에서 작업을 해야 한다는 것이 좀 불편했습니다. 만일 로컬에서도 작업할 수 있다면, VI 에디터에서 글을 쓰고 바로바로 확인하는 방법으로 더 편하게 작업할 수 있을 테니까요. ^^;;;

그래서 찾아보던중... 아웃사이더님의 블로그에서 VIM Plugin을 발견했습니다. VIM에서 작업하다가 Command Line에 :Mm만치면 웹 브라우저에서 바로 확인할 수 있는 멋진 녀석이더군요. ;)

VIM Markdown Preview 설치 방법

설치방법 또한 아주 간단했습니다. vim-markdown-preview사이트로 이동해서 파일을 다운로드한 뒤, plugin 폴더와 doc 폴더의 모든 파일을 홈 디렉터리 아래에 있는 .vim 디렉터리 아래에 넣어두면 됩니다. ^^;;; 직접 복사하는 것이 귀찮다면 아래처럼 install.sh를 직접 실행하셔도 됩니다. 단, 홈 디렉터리 아래에 .vim/plugin 폴더가 이미 생성되어 있어야 합니다.

$> install.sh

실행 방법

설치가 모두 끝났다면 vim으로 파일을 하나 열어서 아래처럼 텍스트를 그대로 입력한 다음 Command Line에 :Mm을 입력해보세요. 기본 CSS가 Github Style로 되어 있어서, Github처럼 예쁘게 포매팅된 문서를 보실 수 있을 겁니다. ^^

#1.안녕하세요 H1 입니다.
## 1.1 H2에요

이것은 일반 텍스트입니다. 마크다운으로 아주 편하게 문서를 작성할 수 있어요. ;)

* 리스트1
* 리스트2
* 리스트3

이제 코드를 한번 보겠습니다.

    이 부분은 코드로 표시될 부분입니다. 탭을 1번 입력하거나 스페이스바를 4번 입력하면 코드 블럭을 사용할 수 있습니다. 

> 이것은 인용 블럭입니다. 정말 쉽죠? ^^;;;

[kkamagui blog](http://kkamagui.tistory.com)는 링크를 거는 간단한 방법입니다. 이것 외에도 많은 방법이 있어요 ;) 더 많은 내용은 [마크다운 문법](http://blog-kkamagui.cloudfoundry.com/posts/1)을 참고하세요.

결과:


1.안녕하세요 H1 입니다.

1.1 H2에요

이것은 일반 텍스트입니다. 마크다운으로 아주 편하게 문서를 작성할 수 있어요. ;)

  • 리스트1
  • 리스트2
  • 리스트3

이제 코드를 한번 보겠습니다.

이 부분은 코드로 표시될 부분입니다. 탭을 1번 입력하거나 스페이스바를 4번 입력하면 코드 블럭을 사용할 수 있습니다. 

이것은 인용 블럭입니다. 정말 쉽죠? ^^;;;

kkamagui blog는 링크를 거는 간단한 방법입니다. 이것 외에도 많은 방법이 있어요 ;) 더 많은 내용은 마크다운 문법을 참고하세요.


CSS 바꾸는 방법

Github Style도 충분히 만족스럽지만 각자의 취향 차이가 있으니 자신이 원하는 CSS로 바꾸는 방법도 살짝 알아보겠습니다. 홈 디렉터리에 있는 .vim/plugin 폴더 아래의 preview 관련 폴더로 이동해보면 아래와 같은 파일이 보일 겁니다.

kkamagui@ubuntu:~/.vim/plugin/vim-markdown-preview/stylesheets$ ls
github.css  safari-reader.css  simple-print.css

여기서 github.css를 자신의 입맛대로 바꾸거나, 아니면 여기에 css 파일을 복사하고, plugin 폴더 아래에 있는 vmp.vim 파일을 수정해도 됩니다. 파일을 열어서 23번 라인 근처를 보시면 stylesheet를 지정하는 부분이 보이는데요, 요 부분을 수정해줍니다. 저는 application.css 파일을 사용하고 있어서 요걸 지정해줬습니다.

 22 if !exists('g:VMPstylesheet')
 23     let g:VMPstylesheet = 'application.css'
 24 endif

자, 다 변경했으면 이제 다시 Command Line에서 :Mm을 입력해보겠습니다. 그러면, 새로운 페이지가 열리면서 지정한 CSS가 적용된 화면을 볼 수 있을 겁니다. ^^;;;

마크다운 덕에 재미있는 일을 많이 해보는군요. ;) 텍스트로 만들어진 문서를 작성하는 데는 마크다운도 괜찮은 선택인 것 같습니다. 그림이 들어가야 한다면... 그림을 어디 올려서 링크를 걸어야 하는 점이 약간 불편하긴 한데요, 그래도 링크만 있다면 그림을 넣는 건 편리하기 때문에 어떻게든 될 것 같네요.

+ Recent posts