본문 바로가기
퍼블리싱

티스토리 소스코드 코드블럭 꾸미기

by lionbum 2021. 6. 9.

티스토리 소스 코드 블럭 꾸미기

- 티스토리에서 제공하는 소스코드 스타일을 커스텀 하기 

- 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

댓글