코드 이쁘게 넣기 with GitHub Gist

들어가며

 알고리즘 답안을 검색하다 티스토리 블로그에 이쁘게 코드를 작성해놓은 글들을 보았습니다. 어떻게 하는지 알아보니 GitHub Gist를 활용하면 되는 것이었습니다.

 티스토리 자체적으로 제공하는 코드블록도 나름 쓸 만하지만 GitHub Gist를 활용하면 자신의 답안도 GitHub Gist상에 체계적으로 관리 가능하고, 무엇보다도 보기에 이뻐서 좋습니다.

---

방법 설명

단계 1. 새 gist 생성 화면 진입

• GitHub 접속
• 우측상단 프로필 왼쪽 옆 + 아이콘 클릭
• New gist 클릭

단계 2. 새 gist 생성

• 제목 및 gist 파일 이름, 내용 입력
• gist 파일 이름 입력 시 자신이 필요한 확장자명 입력. JavaScript 파일을 생성하고자 한다면 .js 로 입력
• 전부 입력했다면 Create secret gist 버튼 클릭

단계 3. gist html 태그 복사

• 복사 버튼 클릭하여 <script></script> 태그 클립보드에 복사

단계 4. 티스토리 작성 글에 붙여넣기

 

• 티스토리 글 작성 모드를 기본모드 -> HTML로 변경
• HTML 작성 모드에서 앞서 복사한 script 태그 붙여넣기
• 붙여넣기 완료 후 다시 글 작성 모드를 기본모드로 변경

마지막 단계. 결과물 확인

 위 과정을 거쳐 gist를 붙여넣으면 아래와 같이 나옵니다!

---

그 밖의 팁

• 나의 gist 관리

 프로필 화면을 누르면 나오는 메뉴창에서 Your gists 메뉴에 접속하면 이때까지 작성한 gist들을 한 데 볼 수 있습니다. gist 관리 메뉴에서 gist를 수정하거나 삭제할 수 있습니다.