깃허브 지스트 활용해 티스토리에 코드 표현하기

현재 이 티스토리에 웹에 필요한 정보들을 담으면서 코드를 조금 더 명확하게 표현할 필요를 느껴, github gist를 활용하는 방법을 살펴본다. 기존 깃허브 게정과 연동하므로 이미 깃허브 계정이 있다면 편하게 지스트를 사용할 수 있다.

 

Github Gist 활용하기

CONTENTS

 

깃허브 지스트란?

github gist는 짧은 코드, 메모 등을 기록하거나 공유할 수 있는 무료 서비스이다.

참고로, gist는 요점, 요지라는 뜻을 지니고 있는데, 포털사이트에서 검색을 하면 GIST를 약자로 사용하는 광주과학기술원이 가장 먼저 보인다.

 

깃허브 지스트 사용하기

우선 깃허브로 로그인한다. 깃허브 지스트는 깃허브 계정과 연동하므로 깃허브 계정을 그대로 사용하면 된다.

 

깃허브 지스트 바로가기

Discover gists

 

또는 깃허브 사이트에서 바로 깃허브 지스트로 이동할 수도 있다.

 

깃허브 지스트 이동하기

 

깃허브 사이트에서 우측 상단에 위치한 플러스 기호를 누르면 New gist가 나오는데, 여길 누르면 바로 깃허브 지스트로 이동한다. 위에 깃허브 지스트 바로가기를 누른 것과 동일한 화면이 나온다.

 

깃허브 바로가기

GitHub: Where the world builds software

 

깃허브 지스트로 들어오면 다음과 같이 입력할 수 있는 포맷이 나온다. 상단에 위치한 Gist description 공간은 말 그대로 작성하는 지스트 파일을 설명하는 내용을 담는다. 지스트 파일이 많아지면 무엇을 담고 있는 지 헷갈릴 수 있으므로 간략하게 무슨 지스트 파일인지 설명을 입력하면 된다. 하지만 필수 입력 공간은 아니므로 입력하지 않아도 사용에는 아무런 문제가 없다.

 

깃허브 지스트 화면

 

그 다음 칸에 위치한 Filename ... 공간은 반드시 입력해야 하는 필수 입력 공간이다. 여기에는 파일명을 적는데, 이때 확장자도 함께 입력해야 한다. 그런 후에 아래 넓은 공간에 코드를 입력하면 된다. 이때 코드 뿐만 아니라 간단한 메모글을 입력해도 활용이 가능하다.

 

입력을 다 했으면 하단 녹색 버튼을 누르면 저장할 수 있다. 이때 깃허브지스트는 두 가지 방법으로 저장이 가능하다. 

하나는 Create secret gist 저장으로 검색엔진에 노출하지 않게 저장하는 방법이다.

다른 하나는 Create public gist 저장으로 검색엔진에 노출되게 저장하는 방법이다.

어느 저장 방법을 사용해도 URL만 알면 누구나 접근이 가능하다.

 

저장까지 완료한 후에 티스토리에 활용하려면, 우선 작성한 지스트 파일 상단에 위치한 Embed url를 복사한다. 

 

Embed URL

우측에 위치한 겹쳐 있는 사각형을 누르면 복사할 수 있다. 이후 티스토리 모드를 html 모드로 전환한 후에 원하는 위치에 붙여넣기한다.

 

 

그러면 위처럼 나타난다. 여기에서는 코드 대신에 메모 형식 글을 담았다. 일반적으로 지스트를 활용해 글보다는 코드를 담는다. 티스토리 자체에서 제공하는 html 블럭 플러그인도 코드를 담는 게 가능하다. 하지만 티스토리 자체에서 제공하는 html 블럭 플러그인이 편의성이 높지 않다. 지스트로 작성한 파일은 언제라도 깃허브 지스트에서 수정이 가능하다. 깃허브 지스트에서 파일 내용을 수정하면, 티스토리에 담긴 지스트 파일이 자동으로 수정된다.

 

지스트 줄 없애기

 

 

만약에 지스트 파일에 코드를 입력해 티스토리에서 활용했는데, 줄이 나와서 불편하다면 키스토리 스킨 편집에서 CSS 마지막에 줄을 없애는 코드를 추가하면 된다. 

 

.gist table tr, td{ border:0px !important; }

 

지스트 파일이 티스토리에 담길 때 gist라는 클라스를 생성하고 그 안에 테이블 형태로 구조화하기 때문에, 이 부분에 있는 보더를 없애면 된다. 

더불어 지스트가 담긴 클라스를 활용해 CSS에서 원하는 형태로 스타일을 변경할 수도 있다.