[Git] 티스토리 예쁜 코드 블럭을 넣어보자(Github gist )

코드 블럭을 예쁘게 💐

티스토리에도 기본적인 예쁜 코드 블럭이 많지만, 다른 블로그들의 코드를 읽다보면 유달리 가독성이 좋은 코드 블럭이 보인다.

개발 관련 블로그 포스팅을 주로 하다보니, 코드를 많이 작성하게 되는데 코드의 길이가 길어지면 가독성이 안좋을 때가 있다.

그럴때, Github Gist에서 제공해주는 서비스를 이용하면 더욱 아름다운(?) 코드 블럭을 사용할 수 있다.

Github Gist

Github Gist란?

 코드조각(Code Snippet), 로그, 메모 등을 남기고, 공유할 수 있는 서비스

 

Github Gist 사용 방법

 

1️⃣ Github Gist로 이동

https://gist.github.com/

Discover gists

Github Gist 접속 화면

 

2️⃣ Gist 코드 블럭 작성

✅ description에 어떤 것에 관한 코드인지 간략한 설명을 적는다. (이 내용은 코드 블럭 안에서 보이진 않고, 본인의 Gist에서만 보인다.)

✅ Filename을 작성한다. 중요한 점은 확장자도 꼭 같이 적는다. 예를들어, Python이라면 .py, JavaScript라면 .js 까지 적는다.

✅ 코드를 작성하고, 우측 하단의 create secret gist 버튼을 누른다.

 

 

3️⃣ Embedding 코드 복사 및 붙여넣기

이후 우측 상단의 Embed 칸에 <script src=".... 의 오른쪽에 위치한 복사 버튼을 클릭한다.

이 script 태그를 작성할 티스토리 글의 HTML에 복사해줄 것이다.

Embedding 코드 복사하기

 

이후, 티스토리 글 작성하는 곳에서 HTML 작성 모드로 들어가준다.

티스토리 글 작성 화면

이후 원하는 위치에 복사한 script 태그를 붙여넣기!

HTML 모드

🔥 완성