깃헙 지스트 gist 이용해서 블로그에 코드 블럭 추가하기

개발지식을 공유하는 블로거는 소스 코드를 보여주어야 하는 경우가 생깁니다.

 

깃헙의 지스트 gist 서비스를 이용해 네이버 블로그처럼 손쉽게 소스코드를 삽입할 수 있습니다.

 

지스트를 이용해 추가한 코드블럭은 다음과 같습니다.

 

1. 지스트 서비스 가입

2. 지스트 생성하기

3. 지스트로 티스토리에 코드블럭 추가하기

 

지스트 서비스 가입

 

깃헙 아이디가 있으면 지스트를 이용할 수 있습니다.

 

깃헙에 로그인 후 https://gist.github.com/  깃헙 지스트 페이지로 이동하면 코드를 입력할 수 있는 곳으로 연결됩니다.

 

 

지스트 서비스를 바로 사용할 수 있습니다.

 

 

퍼블릭/시크릿 지스트 생성하기

 

지스트를 생성하면 해당 코드블럭을 블로그에 추가할 수 있습니다. 

 

우선 공유하고 싶은 코드를 코드 블럭에 작성합니다.

 

 

작성 후 오른 쪽 아래 초록색 버튼으로 지스트를 생성, 공유할 수 있습니다.

 

 

지스트 생성은 두 가지 옵션이 있습니다.

 

1. 퍼블릭 지스트

사람들이 볼 수 있으며 검색 가능한 지스트를 생성합니다.

 

2. 시크릿 지스트

사람들이 볼 수 있으며 검색 불가능한 지스트를 생성합니다.

 

특이하게도 시크릿 지스트로 생성한다해도 url을 알고 있다면 누구나 코드 블럭을 볼 수 있습니다. 

 

지스트 생성 옵션은 검색가능 여부의 차이라고 생각하면 편합니다.

 

저는 제 지스트가 검색이 가능하도록 퍼블릭 지스트로 생성하겠습니다.

 

 

지스트를 생성하고 나면 시크릿과 퍼블릭 설정을 변경할 수 없습니다. 새로 만들어야 합니다.

 

 

지스트로 티스토리에 코드블럭 추가하기

 

지스트를 생성하고 해당 페이지에 들어가면 링크를 복사할 수 있는 컨트롤이 있습니다.

 

Embed 형식으로 링크를 추가해야하므로, 설정된 Embed 를 변경하지 말고 링크를 복사합니다.

 

 

티스토리 포스트에 링크를 임베드하는 방법은 두 가지가 있습니다.

 

"HTML 모드"로 진입하여 링크를 추가하는 방법이 꼬일 염려가 없어 편합니다.

 

"기본모드"를 누르고 "HTML"를 눌러 HTML 모드로 진입합니다.

 

 

 

원하는 위치에 링크를 추가합니다. 

 

 

"HTML"를 누르고 "기본모드" 항목을 눌러 텍스트를 작성하기 편한 기본모드로 돌아옵니다.

 

포스팅 작성 중에는 입력된 코드를 확인할 수 없습니다.

 

 

포스팅을 완성하고 나면 깃헙 지스트에 생성해둔 코드가 문제없이 추가되어 있음을 확인할 수 있습니다.

 

 

 

오늘은 저도 처음 배운 깃헙 지스트 gist 를 소개했습니다. 사용법이 쉽고 깃헙 사용법과 거의 동일하여 익숙한 점이 좋았습니다. 블로그를 작성하시는 분이시라면 활용해 보시길 바랍니다.

 

끝까지 읽어주셔서 감사합니다.