마크다운(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가 적용된 화면을 볼 수 있을 겁니다. ^^;;;

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

HTML 태그 중에 pre 태그는 그 내부에 있는 글을 있는 그대로 보여주는 특징이 있습니다. 그래서 Code를 보여줄 때 pre 태그를 사용해서 쓰고 있는데요, 이게 한 라인이 길어지면 스크롤바를 만들어서 보여주더라구요. ^^;;;;

사실 스크롤바를 보여줘도 상관은 없는데, 매번 스크롤해서 보려니 귀찮기도 하고... 그냥 다른 태그들처럼 다음 라인으로 개행을 해서 보여줘도 되는 것 같기도해서 방법을 찾아봤습니다.

역시나 구글신이 친절히 알려주셨는데, 아래처럼 css의 pre 태그 항목에 white-space: pre-wrap; 속성을 사용하면 됩니다. 좀더 자세한 내용은 http://stackoverflow.com/questions/248011/how-do-i-wrap-text-in-a-pre-tag 을 참고하시면 됩니다.

pre{
    background-color: #E6E6FA;
    padding:10px;
    overflow: auto;
    white-space: pre-wrap; /* pre tag내에 word wrap */
}  


아우... 이거 원 모르는게 많아서 진도가 나가질 않네요. ㅠㅠ 웹세상은 제가 아는 세상과 또 다른 세계인 것 같아요. ㅠㅠ

난데없이 요상한 곳(?)에 불이 붙어서 요즘 루비 온 레일즈(Ruby On Rails)로 간단한 웹페이지를 만들어 보고 있습니다. ^^;;; 그래봤자 루비 온 레일즈 사이트에 있는 예제를 보고 끄적거리는 수준입니다만, 제 손으로 만든 게 돌아가는 걸 보니 정말 신기하네요. 웹은 돌아가는 것이 눈에 바로 바로 보여서 정말 짱인 것 같습니다. ㅎㅎ

그런데 만든 웹페이지를 스마트폰으로 들어가보니... 글자가 점처럼 보일 정도로 광활하게 나오더군요. 이런... ㅠㅠ 그래서 어떻게 하면 스마트폰에서도 잘 보일까 싶어서 구글 검색을 하던 도중 메타 태그(Meta Tag)를 사용하면 된다는 것을 알았습니다. :) 아래처럼 말이죠.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0, minimum-scale=0.5, user-scalable=yes" />


위의 각 항목은 아래와 같은 의미를 가지고 있습니다.

- width=device-width : 플랫폼 가로 크기에 맞춤, 수치를 넣으면 그수치에 맞게 맞춰짐(ex, 300px)
- initial-scale=1.0 : 페이지 로딩시 확대비율
- maximum-scale=3.0 : 최대확대비율
- minimum-scale=0.5 : 최소축소비율
- user-scalable=yes : 사용자의 확대보기 허용 여부(no/yes)


위의 태그를 넣어주고 모바일 보기 모드일 때 가로 폭을 좀 줄여줬더니 스마트폰에서도 나름대로 볼만한 크기로 잘 나오는군요. ㅎㅎ
그럼 좋은 하루 되세요 ;)

ps)  참고 사이트
루비 온 레일즈에서 html 파싱에 사용하는 Nokogiri를 설치할 때 아래처럼 libxslt 관련 오류가 발생하면 libxslt를 설치해주면 됩니다.

Installing nokogiri (1.5.0) with native extensions
Gem::Installer::ExtensionBuildError: ERROR: Failed to build gem native extension.

        /usr/bin/ruby1.8 extconf.rb
checking for libxml/parser.h... yes
checking for libxslt/xslt.h... no
-----
libxslt is missing.  please visit http://nokogiri.org/tutorials/installing_nokogiri.html for help with installing dependencies.
-----
*** extconf.rb failed ***
Could not create Makefile due to some reason, probably lack of
necessary libraries and/or headers.  Check the mkmf.log file for more
details.  You may need configuration options.

Provided configuration options:
    --with-opt-dir
    --without-opt-dir
    --with-opt-include
    --without-opt-include=${opt-dir}/include
    --with-opt-lib
    --without-opt-lib=${opt-dir}/lib
    --with-make-prog
    --without-make-prog
    --srcdir=.


설치 방법은 다음과 같습니다.
sudo apt-get install libxslt-dev libxml2-dev

아아... 고난과 역경의 연속이군요. OTL....
우분투에서 루비 온 레일즈를 이용해서 이것 저것 삽질하고 있습니다. ^^;;;; 아무래도 처음하다보니 이것저것 문제가 많은데요. 이번에는 만든 예제를 릴리즈하려고 bundle package를 하다보니 mysql2 관련 오류를 만났습니다. ㅠㅠ

kkamagui@kkamagui-VirtualBox:~/project/blog$ sudo gem install mysql2 -v '0.3.11'Building native extensions.  This could take a while...
ERROR:  Error installing mysql2:
        ERROR: Failed to build gem native extension.

        /usr/bin/ruby1.8 extconf.rb
checking for rb_thread_blocking_region()... no
checking for rb_wait_for_single_fd()... no
checking for mysql_query() in -lmysqlclient... no
checking for main() in -lm... yes
checking for mysql_query() in -lmysqlclient... no
checking for main() in -lz... no
checking for mysql_query() in -lmysqlclient... no
checking for main() in -lsocket... no
checking for mysql_query() in -lmysqlclient... no
checking for main() in -lnsl... yes
checking for mysql_query() in -lmysqlclient... no
checking for main() in -lmygcc... no
checking for mysql_query() in -lmysqlclient... no
*** extconf.rb failed ***
Could not create Makefile due to some reason, probably lack of
necessary libraries and/or headers.  Check the mkmf.log file for more
details.  You may need configuration options.

Provided configuration options:
        --with-opt-dir
        --without-opt-dir
        --with-opt-include
        --without-opt-include=${opt-dir}/include
        --with-opt-lib
        --without-opt-lib=${opt-dir}/lib
        --with-make-prog
        --without-make-prog
        --srcdir=.
        --curdir
        --ruby=/usr/bin/ruby1.8
        --with-mysql-config
        --without-mysql-config
        --with-mysql-dir

역시나 해결책은 구글신이 알려주셨습니다. ㅠㅠ 구글신 쵝오 ㅠㅠ)-b (http://railsforum.com/viewtopic.php?id=40776)
아래처럼 libmysqlclient-dev 패키지를 설치하면 깔끔하게 해결됩니다.

sudo apt-get install libmysqlclient-dev

아흑... 뭐라도 하나 제대로 되야할텐데... 쉽지 않네요 ㅠㅠ

우분투(Ubuntu)에서 루비 온 레일즈(Ruby on Rails)버전을 3.2.1로 업그레이드한 뒤에, rails server를 실행했더니 아래와 같은 오류가 발생했습니다. OTL... 정말 이거 원 쉬운 게 하나도 없군요. ㅠㅠ

kkamagui@ubuntu:~/rails/blog/script$ rails server
/usr/lib/ruby/gems/1.8/gems/execjs-1.3.0/lib/execjs/runtimes.rb:50:in `autodetect': Could not find a JavaScript runtime. See https://github.com/sstephenson/execjs for a list of available runtimes. (ExecJS::RuntimeUnavailable)
    from /usr/lib/ruby/gems/1.8/gems/execjs-1.3.0/lib/execjs.rb:5

역시 구글을 검색했더니 아래와 같은 해결책을 하사해주셨습니다.(http://stackoverflow.com/questions/6282307/rails-3-1-execjs-and-could-not-find-a-javascript-runtime)

In your Gemfile

write this

gem 'execjs'
gem
'therubyracer'

and then run

bundle install

everything works fine for me :)


역시 구글은 짱인 것 같아요. ㅠㅠ)-b
요 근래 Ruby on Rails로 만들어 보고 싶은 게 있어서 Rails를 좀 보고 있습니다. 아직 잘은 모르지만 그 심플함과 강력함에 깜짝 놀라고 있는데요, 우분투(Ubuntu)에 깔려있는 레일즈(Rails)버전이 2.3 버전대라 3.0 버전 이상으로 올라가고 싶어서 레일즈 버전을 올렸습니다.

레일즈 버전을 올리는 방법은 아래와 같이 하면 됩니다. ;)
sudo apt-get install ruby-full rubygems
sudo su -
export REALLY_GEM_UPDATE_SYSTEM=true
gem update --system
exit
gem install rails

레일즈 버전은 깔끔하게 올라갔는데, 문제는 그 뒤더군요. 예제를 따라한다고 rails new blog를 입력하는 순간... 아래와 같은 오류가 발생하면서 더이상 진행이 안되었습니다. OTL...
/usr/bin/ruby1.8 extconf.rb
checking for sqlite3.h... no
sqlite3.h is missing. Try 'port install sqlite3 +universal' or 'yum install sqlite3-devel'
*** extconf.rb failed ***

Could not create Makefile due to some reason, probably lack of necessary libraries and/or headers. Check the mkmf.log file for more details. You may need configuration options.

그래서 이걸 해결할려고 구글신에게 여쭈었더니... 아래와 같이 하면 된다고 알려주시더군요. 역시 구글신 쵝오... ㅠㅠ(http://stackoverflow.com/questions/3458602/sqlite3-ruby-install-error-on-ubuntu)
sudo apt-get install libsqlite3-dev

아아... 역시 구글은 최고인 것 같아요... OTL...

+ Recent posts