Github 의 Gist 사이트를 이용해서 티스토리 블로그 소스 링크하는 방법

Github 의 Gist 사이트를 이용해서 티스토리 블로그 소스 링크하는 방법

 

환경: Chrome

 

저는 현재까지 소스 코드를 블로그에 올릴 때 Syntax Highlighter 을 사용했습니다. 그런데 소스를 일반 텍스트처럼 바로 올린다고 하일라이트 편집이 되는 것은 아닙니다. <pre> 태그로 감싸야 하고 html 일 경우 “<” 와 “>” 는 “&lt;: 와 “&gt;” 로 변환해야 합니다. 소스 편집 시간을 줄일 수 없을까? 고민하던 차에 Github 의 Gist 를 알게 되었습니다.

 

장점은 쉽게, 부여된 embed 주소를 붙여 넣기만 하면 올린 소스 그대로 화면에 추가가 가능합니다. 물론 Gist 사이트에 접속해야 하지만 이전보다 문서 편집 시간을 줄일 수 있습니다. 그리고 소스는 자동으로 검색엔진에 노출할 수가 있습니다. 조금이나마 유입에도 도움이 됩니다.

 

▼ 소스 코드를 올릴 수 있는 github 사이트 주소 입니다. 아래 사이트로 접속해서 계정을 만들고 로그인을 해야 합니다.

https://gist.github.com

 

▼ 오른쪽 상단에 있는 Sign In 버튼을 눌러 로그인을 해야 합니다. 현재는 계정을 가지고 있지 않은 사람은 올릴 수 없습니다. 

 

▼ 로그인 후 새로운 소스를 올리기 위해 오른쪽 상단에 있는 New gist 버튼을 클릭합니다. 

 

▼ 화면에 입력해야 될 정보는 다음과 같습니다.

 

1 : 제목을 입력합니다.

2 : 확장자가 들어간 파일명을 입력합니다. 확장자를 통해서 언어를 판단하고 하일라이트를 하기 때문에 반드시 입력해야 합니다.

3 : 소스를 입력하는 공간입니다.

4 : 소스를 추가합니다. 

 

▼ 올릴 소스는 2가지 형태로 구분할 수 있습니다. 다른 사람들이 볼 수 있도록 공개하거나 비공개로 올리는 것입니다. 구분하는 버튼은 아래에 있습니다. 

 

▼ 소스를 올리고 나면 링크 주소를 알아야 합니다. 오른쪽 상단에 Embed 를 선택하고 주소 복사 버튼을 클릭합니다. 

 

▼ 주소는 다음과 같습니다. 해당 주소를 티스토리에 입력하기 위해서 글쓰기 상단에 있는 외부컨텐츠 버튼을 클릭합니다. 소스 입력을 위한 팝업창이 뜨면 복사한 코드를 붙여 넣고 추가합니다.

 

<script src="https://gist.github.com/mainia/f2710e9232f0aaa24b94638a5cfd8e2e.js"></script>

 

▼ 화면에 보이지 않아도 Javascript 소스는 추가가 되어 있습니다. HTML 에디터 화면을 열면 볼 수 있습니다. 오른쪽 끝에 있는 HTML 옵션을 체크해 보세요. 

 

▼ 보이지 않던 스크립트 코드가 나타났습니다. 

 

▼ 글을 저장하고 화면을 열어 보세요. 결과는 다음과 같습니다. Gist 에 저장한 정보를 깔끔하게 보여 줍니다.