깃허브 지스트(GitHub Gist)로 티스토리 블로그에 코드 삽입하기

문제

티스토리 하이라이팅 플러그인 지원 언어

티스토리는 플러그인을 적용해도, 코드블럭으로 다양한 언어를 지원하지 않는다.

예를 들어, Dart 언어가 지원되지 않는다.

코드 하이라이트가 각 언어에 맞게 되지 않으면, 읽기 힘들어진다.

이 문제를 티스토리가 아닌 깃허브 지스트(GitHub Gist) 를 통해서 해결해보고자 한다.

 

깃허브 지스트(GitHub Gist)

코드 저장소인 깃허브는 정말 많이 들어봤을 것이다. 

그렇다면 깃허브 지스트는 무엇일까?

깃허브 지스트는 메모형식으로 코드, 마크다운, 작은 데이터 등을 쉽고 빠르게 공유할 수 있게 해주는 깃허브의 또다른 서비스이다. 

이 메모는 다양한 웹사이트에 삽입할 수 있다. 

이 메모는 검색엔진에서 공개될 수도 있고, URL 공유를 통해서만 접근할 수도 있다.

 

티스토리 블로그에 코드 삽입하기

1. 링크의 github gist 를 방문하여, 로그인한다. 깃허브 아이디로 로그인됩니다. (로그인 아이디가 없다면 회원가입을 한다)

https://gist.github.com/

Discover gists

 

2. 아래 화면에서 "메모의 설명", "파일명", "파일 내용" 을 기입합니다.

파일명에는 확장자가 포함되어야합니다. 확장자를 기준으로 파일 내용의 코드 하이라이팅이 적용됩니다.

저는 dart 언어를 사용할 것이기 때문에 .dart 로 확장자를 기입해주었습니다.

3. 하단의 Create secret gist 를 클릭합니다.

public 으로 생성할 경우, 검색엔진 등에 노출됩니다.

private 로 생성할 경우, 공유되는 URL 을 통해서만 접근가능합니다.

4. 다음의 화면이 나오면 정상적으로 생성된 것입니다.

 

5. 우측 상단의 복사 버튼을 클릭합니다.

6. 티스토리의 글쓰기에서 HTML 블럭을 선택한 뒤, 5번에서 복사했던 코드를 붙여넣기합니다.

7. 글을 발행하면 하이라이팅 된 코드가 삽입됩니다.

dart 언어의 신택스 하이라이팅이 정상적으로 적용되었습니다.

 

 

티스토리에서 dart 언어는 하이라이팅 지원이 되지 않았는데, 깃허브 지스트를 활용하여 블로그에 하이라이팅된 코드를 삽입할 수 있었습니다.