[tistory] Github - Gist를 이용한 소스코드 올리기

  1   Gist

---

 한참전만해도 Syntax Highlighter를 사용해서 소스코드를 올리고는 했어요. 그런데 잘되가다도 한번씩은 꼭 태그가 삑이 나서 전체 코드가 깨지는 현상도 발생했었는데 그게 너무 짜증나서 요즘은 Gist를 사용합니다. Gist의 장점은 우선 쉽다! 코드입력 후 Gist를 생성하면 자동으로 해당코드의 Embed 주소가 부여되는데, 그 주소를 티스토리의 글쓰기상에서 외부컨텐츠 메뉴를 이용해 붙여넣기만 하면 끝납니다.

 우선 Gist 사이트로 이동!

Gist : https://gist.github.com/

 위 링크로 이동하면 다음과같은 화면을 볼수있어요. 나는 Github도 사용하기 때문에 로그인 되어있는 상태이지만 Gist만을 사용할 것이라면 굳이 회원가입을 할 필요는 없습니다.

링크를 타고 이동하면 볼수있는 첫화면

 위 화면에서 Gist description... 부분은 해당 소스코드의 설명입력부분입니다. 그 밑에 Name this file... 부분은 소스코드의 이름이 되구요. 여기서 좋은점이 소스코드의 확장자만 입력하면 Gist 내부에서 자동으로 해당 확장자에 맞는 코드 하이라이팅을 적용해 줍니다.

  2   코드 하이라이팅

---

 예를들면 test.js 라고 파일이름을 작성하면 Gist에서는 .js라는 확장자명을 보고 해당코드를 자바스크립트코드로 인식해 그에 맞는 코드하이라이팅을 적용하게 되는거죠!

확장명을 입력하면 자동으로 코드 하이라이팅이 적용됩니다!

 보시면 아시겠지만 파일 이름뒤에 .js라는 확장명을 붙이자 자동으로 자바스크립트 하이라이팅이 되었습니다. 이상태에서 우측하단의 Create public Gist 버튼을 클릭하시면 해당 코드가 Gist로 변환되어 저장되게 되지요. 이제 생성된 Gist의 주소만 가져와 붙여넣기 하시면 됩니다.

 붙여넣기할 주소는 생성된 Gist의 우측에 보시면 Embed URL이라고 표시되는 부분이에요. 우측의 버튼을 클릭하면 클립보드에 자동으로 저장이 되게 됩니다. 붙여넣을곳 가서 Ctrl + V만 누르면 됩니다.

우측의 Embed URL을 복사하세요.

 그럼 이제 티스토리로 돌아와 글쓰기 메뉴에서 외부컨텐츠 메뉴를 클릭하여 자기가 생성한 Gist의 주소를 붙여넣기하면 끝이납니다.

티스토리 글쓰기에서 외부컨텐츠 메뉴를 이용해 복사한 Gist의 주소를 삽입하세요.

 이렇게 붙여넣기하고 글을 작성 후에 적용하면 이런 모습의 Gist가 포스트내에 생성이 되게 됩니다. 또한 이렇게 생성된 Gist는 코드 밑의 이름을 클릭하여 해당 Gist로 이동할 수 있는데 버전관리 및 수정이 가능합니다. 

 

 중요한건 Gist는 Gist 서버내에 코드가 저장되기 때문에 자신이 Gist에서 직접 지우지 않는 이상 소스는 계속 남아있어서 어디서든 가져다 쓸 수 있다는것이죠!

var gist = '테스트입니다.';

funvtion gistTest(str){

console.log(str);

}

gistTest(gist);

출처: http://deoki.tistory.com/43 [Repository]