첫 몇 포스팅을 티스토리 내 코드블럭과 Syntax Highlight 플러그인을 사용해 소스코드를 올렸었는데, 내가 쓰고 있는 스킨의 문제인지 코드블럭 안에 또 박스가 따로 생기고 그 안에서만 스타일이 적용되는 것을 보고 너무 거슬려서 찾아보다가 GitHub Gist를 알게 됐다. 가끔 블로그 보다가 GitHub의 파일을 그대로 갖고 온 것 같은 코드블럭들이 있었는데 그게 이거였다니...~
GitHub Gist 임베드
1. https://gist.github.com/ 에 접속해 코드블럭으로 만들 소스코드를 description, filename과 같이 입력한다. 이때 확장자를 꼭 파일명에 넣어 줘야 언어별 코드 하이라이팅이 제대로 된다.
2. Create secret/public gist를 누르면 아래처럼 gist 파일이 만들어지고 embed 할 수 있는 url이 생긴다. 이를 복사해두자. secret으로 생성하면 url을 가진 사람만 이 git 파일에 접근할 수 있고, 검색엔진에 수집되지 않는다고 한다.
3. 티스토리에서 글쓰기 모드를 HTML로 바꾸고, 아까 복사해둔 embed url을 원하는 곳에 붙이면 아래처럼 GIST 하고 뭔가가 생긴다.
4. 글을 발행하면 아래처럼 gist 파일이 잘 뜨는 것을 확인할 수 있다. 근데 저 밑줄이 너무 거슬려서... 구글링하다 방법을 찾았다.
5. 티스토리 블로그관리 > 스킨 편집을 하면 아래와 같은 창이 뜬다.
여기에서 html편집 버튼을 누르고, CSS 파일에 아래 코드를 추가해 주면 된다.
body .gist table tr{
border-bottom : 0px;
}
그럼 아래처럼 밑줄 없애기 성공 🐱
참고 : https://leeborn.tistory.com/entry/블로그-Gist-줄-없애기-티스토리-코드블럭-줄-없애기
블로그 gist 사용법 / github gist 사용법 / 티스토리 code highlight / 블로그 코드블럭 / 블로그 깃허브 연동 / 블로그 소스코드