티스토리 소스 코드 블럭 꾸미기
- 티스토리에서 제공하는 소스코드 스타일을 커스텀 하기
- highlightjs.org의 CDN을 활용
방법
1. 사이트 방문 https://highlightjs.org/download/
2. cdnjs 복사 하기
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/highlight.min.js"></script>
3. 티스토리 설정에서 HTML 편집
4. Head 사이에 복사한 내용 붙여 넣고 적용
5. 적용 확인
6. 테마 변경 가능
https://highlightjs.org/static/demo/ 사이트에서 테마를 선택 하여
가져온 CDN에서 아래 경로에서 default를 변경해 주면 가능하다.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/styles/default.min.css">
둘러 보다 보니 어두운 배경이 맘에 들어 agate 테마로 선택.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/styles/agate.min.css">
소스코드를 수정하고 적용하면 변경 완료!!
728x90
반응형
'퍼블리싱' 카테고리의 다른 글
반응형 디자인 레이아웃 너비 기준 (0) | 2021.06.13 |
---|---|
모바일 리셋 스타일- mobile css reset (0) | 2021.06.11 |
CSS Margin - 마진 (0) | 2021.01.27 |
CSS border-width 테두리 너비 (0) | 2021.01.22 |
CSS border 테두리 속성 (0) | 2021.01.21 |
댓글