Publishing Date:2020-10-04

깃헙 블로그에 gist 임베딩하기

Gist

Gist란 Github에서 제공하는 일종의 메모장이다. 하지만 일반적인 메모장과 다르게 git을 품은 메모장이다. clone, fork 등 깃 저장소처럼 사용이 가능하면서 파일 확장자에 따라 코드 하이라이팅을 적용해주고, 수정한 내역에 대해 변경 사항을 전부 기록해준다. 주로 코드 스니펫을 업로드하는 데 사용하지만, 공부한 내용을 정리한다던가 하는 메모로 사용하는 데도 전혀 위화감이 없다. 게다가 private로 생성할 수도 있는데, private로 생성된 gist는 검색되지 않지만, URL로는 접근할 수 있다는 장점이 있다.

Embedding

구글링을 하다보면 tistory나 medium 블로그에서 gist를 사용하여 소스 코드를 올리는 것은 자주 봐 온 일이다. 나만 그런건지는 모르겠지만 그런데 유달리 github.io 주소를 가진 블로그들에서는 gist를 자주 보지 못한 것 같다. 왜 그럴까 생각해보았는데, github 블로그는 html이 아니라 마크다운 문서로 작성하다보니 코드 블럭을 쉽게 사용할 수 있어서가 아닌가 싶다.
나도 지금까지 일반적으로 예시 코드를 작성할 때는 코드 블럭을 사용했지만, 현재 내가 지금 사용하고 있는 블로그 테마가 나에게는 글씨가 너무 큰데다가 코드 블럭에 사용 언어를 명시했음에도 코드 하이라이팅이 안 보여서 코드 블럭의 이점을 얻을 수가 없었다. 또한 소스 코드를 임베딩할 때 gist를 사용하는 것은 다음과 같은 이점이 있다.

1. 코드 줄 번호
   말할 필요도 없다. 보기 편하다.
2. 동기화
   gist에서 코드를 수정했을 경우 포스트를 따로 수정할 필요가 없이 바로 바뀐 내용이 적용이 된다.
3. 간단함!
   티스토리도 이제는 마크다운을 지원한다고 알고 있는데, 마크다운은 전부는 아니지만 html 태그를 병행할 수 있기 때문에 해당 gist의 스크립트 태그를 붙여넣기만 하면 바로 보여진다.
   
   

어제 센서 테스트했던 아두이노 코드를 gist에 업로드해보았다. 파일 확장자에 맞춰서 코드 하이라이팅이 된 것을 볼 수 있다. 해당 파일을 임베딩하기 위해서는 github 리파지토리를 클론할 때처럼 스크립트 태그를 복사해서 그대로 붙여넣으면 된다.
위 코드를 붙여넣으면 아래와 같이 보인다.

결론!

Gist는 편하다. 장점도 많다! 하지만 gist에 여러 파일을 업로드할 경우 사용자가 원하는 대로 순서를 정할 수 없고 asciibetical 순서대로 임의로 정해지므로 파일의 개수가 많아지면 보기 불편할 수 있다.
또한 하나의 gist에 파일이 여러 개 있을 경우 모든 파일이 다 동시에 임베딩된다는 것, 너무 짧은 코드를 임베딩했을 때는 오히려 보기 지저분해질 수 있다는 것 때문에 적당히 가독성과 수정 가능성을 고려하여 코드 블럭과 병행하는 것이 좋아 보인다.