블로그 개발, 블로그에 코드 넣기 : 깃 헙 지스트, Gist GitHub

개인 블로그 사이트에서 코드를 삽입하고 싶을 때 우린 깃 헙의 지스트를 이용할 수 있다. 

 

아래 내용이 지스트를 이용해서 블로그에 코드를 삽입한 결과물이다.

 

 

 

어떻게 해야 하는지 하나씩 알아보자! 

 

 

목차

0. 지스트 ,Gist란
1. 깃 헙에서 지스트 만들기
2. 비밀/공공 지스트
3. 티스토리에 지스트 넣기 (코드 삽입)
4. 마무리  

---

지스트, Gist 란

깃 헙에서 만들 수 있는 깃 레파지토리 git repository 로 코드 블락을 공유하고 설명하기 쉽게 해 줄 수 있는 도구이다.

깃 레파지토리와 똑같이 지스트 역시 클론과 포크가 가능하다.

 

깃 헙에서 지스트 만들기

github에 로그인을 하고, gist.github.com 에 간다.

아래와 같은 화면이 보일 것이다.

Gist descriptions 에는 이 지스트가 어떤 내용을 담고 있는지, 설명하는 글을 짧게 써준다.

Filename including extension. 에서는 파일 이름을 확장자를 포함에서 쓴다. 

그다음 칸에서는 원하는 내용을 써준다.

그 후 초록색 버튼을 보면, 지스트를 생성할 수 있다.

 

---

 

비밀 / 공공 (secret/public )  지스트

 

초록색 버튼을 눌러서 지스트를 생성할 때, Create secre gist와 Create public gist 중에 선택을 할 수 있다.

이름만 보면 secret , 비밀 지스트는 혼자만 볼 수 있는 지스트 같지만, 그렇지 않다.

시크릿이란 이름이 무색하게, url 이 있으면 모르는 사람이라도 언제나 코드를 볼 수 있다. 

 

요약하면, 

public(공공용)는  검색 가능함.

secret (비밀용)는 검색 불가능함.

의 차이이고, URL 주소가 있으면 누구나 해당 지스트를 볼 수 있다.

 

만약, 남들이 코드를 보지 않길 원한다면 아예 프라이빗 개인용 레파지토리 (private repository)를 만들어야 한다.

참고로, gist를 만들고 나서는 public (공공용)에서 secret (비밀용)으로 바꿀 수 없다.

 

 

---

 

티스토리에 지스트 넣기

초록색 버튼을 눌러서 지스트를 생성했으면 아래 그림처럼 'Embed' 라 게 보인다.

티스토리에 넣기 위해서 Embed 옆의 주소를 복사해야 한다. 복사할 때는 사각형 두 개가 겹쳐진 아이콘을 눌러도 된다.

티스토리에서 넣는 법은

1. 티스토리 기본 모드 옆에 (...)을 누르면 " < > HTML  블록 " 이 있는데 거기에 복사한 주소를 넣거주 거나.

2. 기본 모드 말고 HTML 모드로 들어가서 아까 복사한 주소를 원하는 위치에 넣어주고, 다시 기본 모드로 온다.

 

그러면 일단 보이는 건 

아래처럼 보인다.

- <> HTML 코드 블록으로 삽입한 경우

- HTML모드에서 삽입한 경우

 

 

글쓰기 완료를 누르면 아래처럼 보인다.

삽입된 코드의 회색 부분을 누르면 해당 gist 링크에 갈 수 있다. 

 

 

---

 

마무리

블로그에 코드를 삽입하는 방법에 대해서 알아보았다.

티스토리 자체에 '코드 삽입'이 있는데도 불구하고 지스트를 따로 만들어야 하는 이유는 나중에 코드를 수정하게 될 경우가 있기 때문이다.

후에 코드를 수정했을 때, 지스트를 이용하면, 굳이 블로그 글에 다시 들어와서 코드를 수정할 것 없이 변화가 바로 반영된다.