인터넷 자료를 여기저기 뒤지다 보면 소스 코드 쪼가리(Snippet)를 보기 좋고 쓰기 좋게 붙여 넣은 여러 자료들을 보게 된다.

여러가지 방법이 있는데, 대표적으로

  • GitHub Gist
  • SyntaxHighlighter
등이 있다.


여기에는 GitHub의 Gist를 이용하는 방법을 소개하겠다. 참고로, Gist는 요점, 요지라는 뜻이다.

장단점을 알아보기 전에 일단 먼저 해보자.


따라하기 부르르2

https://gist.github.com/ 에 들어가보면 아래와 같이 소스 코드를 작성할 수 있는 화면이 나온다.


보이는 그대로다. 말그대로 Look and Feel~

설명 쓰고, 파일명 쓰고, 언어 선택하고, 들여쓰기 모드 선택하고, 들여쓰기 칸 지정하고, 소스 입력한다.


우하단에 두개의 버튼이 있는데, 좌측 Create Secret Gist에 마우스를 올리면 아래와 같은 설명이 둘의 차이를 말해준다.

검색 엔진에는 노출이 안되지만 당신이 URL을 알려준 사람에게는 보여진다는 내용.


이 글의 목적은 어디까지나 '블로그에 소스 붙여넣기'이므로 목적에 충실하게 그냥 Create Public Gist를 클릭한다. 아래의 화면이 뜬다.


거의 다 왔다. 화면 좌중간의 'Embed this gist'란에 있는 내용을 복사해서, 사용하는 블로그 편집기의 HTML 편집모드에서 적절한 위치에 붙여넣기 하면 끝이다.

결과는 아래와 같다. 이보다 더 쉬울 수 있을까.. 참잘했어요


여기까진 그냥 사용법을 알리기 위해 로그인도 하지 않고 달려왔으나,

어떻게 하는 건지 감 잡았으니 GitHub가 뭔지도 알아보고, 로그인도 해서 제대로 써보긔~~

(로그인도 안하고 만든 위의 Gist는 수정 뿐 아니라 삭제도 안된다.. 괜히 미안해지네 미안미안)


Gist의 장점


  • 쉽다
  • 예쁘다
  • GitHub에 저장이 되므로 Embed Script만 따면 여러글에 쉽게 소스 코드 쪼가리를 올릴 수 있다
  • 일종의 링크 방식이므로 GitHub에서 수정을 하면 수정 내용이 Embed한 모든 글에 반영된다
  • GitHub에서 버전관리까지 가능하다!!! 파이팅
  • 검색 엔진에도 노출이 되므로.. 이하 생략 ^^




Gist의 단점


  • 모양새를 원하는 대로 커스터마이징 할 수 없다.

  • comments powered by Disqus

    블로그 이미지

    뒷태지존

    카테고리

    분류 전체보기 (6)
    CoffeScript (0)
    JavaScript (0)
    HTML5 (0)
    Eclipse (0)
    Modeling (0)
    공개SW (0)
    CEP (0)
    웹이것저것 (3)
    DataVisualization (2)
    골프 (1)