처음 티스토리를 사용하기 시작하며 코드 블록을 통해 소스코드를 올려보려고 했다. 기본적인 배경 화면과는 차이가 있는 회색빛의 배경으로 코드가 보이지만 다른 분들의 티스토리를 보면 검은색 배경의 소스코드를 볼 수 있었습니다.
필자는 이와 같이 만들기 위해 찾아보니 여러 방법이 있었다. 하지만 highlight.js를 이용하면 같은 배경을 만들 수 있다는 것을 알게 되었습니다.
https://highlightjs.org/ 에서 다운 받을 수 있습니다.
상단 이미지의 중앙 하단에 위치한 Style을 통해 어떤 형태의 스타일을 사용할 수 있는지 확인할 수 있습니다.
우측의 Get version x.xx.x버튼을 누르면 하단의 이미지와 같은 코드를 확인할 수 있습니다.
이 스크립트를 추가하는 여러 가지 방법 중 직접 소스를 다운로드하여 자신의 블로그에 업로드하고 설정하는 방법이 있다. 블로그의 HTML 직접 수정도 가능해야 이 스크립트를 사용할 수 있습니다.
스크린샷 맨 아래 "style directory"라는 곳을 클릭하면 style css 가 여러 개 있는데 이중 자신의 맘에 드는 css를 선택해서 설치할 수 있습니다.
이젠 블로그 스킨에서 HTML 만 수정해 주면 된다. 관리자 페이지에서 스킨편집 --> HTML 편집으로 들어갑니다.
필자가 추가한 소스코드입니다.
<head> 안에 코드를 작성했고, 스크립트 중 default라고 적힌 부분에 상단 가장 상단 이미지에서 확인했던 style이름을 넣어주면 됩니다.
'Information > Tistory' 카테고리의 다른 글
| [Tistory] 티스토리 블로그 poster스킨 메뉴 고정하기 (0) | 2020.03.30 |
|---|---|
| [Tistory] 티스토리 블로그 글 복사금지 및 특정 영역 복사 허용하기 (0) | 2020.03.27 |
| [Tistory] 티스토리 블로그 글 제목 수정하기 (0) | 2020.03.14 |
| [Tistory] 티스토리 블로그 이름 수정하기 (1) | 2020.03.14 |
| [Tistory] 티스토리 블로그 닉네임과 프로필 이미지 제거하기 (0) | 2020.03.08 |
