2022. 9. 11. 19:58ㆍ페퍼씨의 정보공유/페퍼씨와 티스토리
안녕하세요, 페퍼씨입니다.
python 공부를 시작하면서 티스토리블로그를 좀 더 본격적으로 이용하게 되었고
모르는 부분이 있으면 구글링을 해보다 다른 블로그에 들어가보면 너무도 이쁘고, 다양한 코드블럭을 발견했었는데요
왜 내 블로그는 적용이 이쁘게 안되는 것인가!! 하고 찾아보다가
코드블럭을 이쁘게 사용하는 법을 알게되었고, 하라는 대로 따라 했으나 잘 적용 되지 않더라구요
그렇게 여러 블로그를 탐독해가며 수차례 시도 끝에 터득해 낸 방법을 까먹지 않고, 공유해보려고 합니다
혹시나 나중에 또 바꾸게 된다면 저도 참고하기 위한 기록용이기도 하구요 ㅎㅎ
먼저 코드블록을 티스토리에서 기본적으로 제공하는 것도 있는데요, 그 이외에 다른 코드블럭을 사용하실 수도 있습니다.
만약 티스토리 플러그인에서 [코드 문법 강조, syntax Highlight]를 사용하고 계신다면 해제해주세요!
사용중으로 체크되어있다면, 아래 테마를 사용하실 수 없습니다.
- highlight.js로 코드블럭 꾸며주기
스킨 편집하기에서 HTML 편집으로 들어가 줍니다.
그리고 아래 코드들을 <head> </head> 사이에 넣어주면 됩니다!
먼저 https://highlightjs.org/ 에 들어가 줍니다.
여기서 Get Version 11.6.0 을 눌러주세요. (버전은 업데이트 될 때마다 달라질 수 있습니다)
여기서 cdnjs 또는 jsdelivr 아래 코드가 있는데, 이 둘 중 어느것을 사용하셔도 가능하니 마음에 드시는걸로 선택하세요
저는 cdjs에 있는 코드를 사용했습니다
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/defult.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
여기서 defult 에 원하는 스타일의 이름을 작성해주시면 됩니다.
작성법에는 간단한 규칙 몇 가지가 있는데요
1. 모두 소문자로 작성해주기
2. 띄어쓰기는 - 표시로 채워주기
3. 만약 base16/ 으로 시작되는 테마를 사용하신다면, base16/에 이어서 테마명을 작성해주시면 됩니다.
제가 선택한 테마는 "paraiso dark" 이구요,
이런식으로 원하는 언어별로 코드블럭 색상도 확인 하실 수 있어요!
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/paraiso-dark.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script>hljs.highlightAll();</script>
저는 paraiso-dark를 defult 자리에 입력해주었습니다.
그리고 이어서 붙여서 같이 써주셔야 할 것이 있습니다.
<script>hljs.initHighlightingOnLoad();</script>
<script>hljs.highlightAll();</script>
오래 된 블로그를 보면 위에껄 보통 사용하시는데, 막혔다고 하더라구요
근데 혹시 몰라서 전 둘 다 써줬어요!
이렇게 작성해주시면 코드블럭이 이쁘게 꾸며진 것을 보실 수 있습니다.
'페퍼씨의 정보공유 > 페퍼씨와 티스토리' 카테고리의 다른 글
| [티스토리] 애드센스 광고 설정하기 (1) - 애드센스 가입하기 (0) | 2022.12.16 |
|---|---|
| [티스토리] 코드블럭 이쁘게 사용하기 - (feat. 폰트 바꾸기 ) (0) | 2022.09.15 |
| [티스토리] 코드블럭 이쁘게 사용하기 - (feat. 동글 동글한 코 만들기 ) (0) | 2022.09.12 |
| [티스토리] 코드블럭 이쁘게 사용하기 - (feat. 테이블 줄 없애주기) (0) | 2022.09.12 |
| [티스토리] 코드블럭 이쁘게 사용하기 - (feat. 번호를 달아주자) (0) | 2022.09.11 |