[티스토리 꾸미기] 코드 블록 변경 꾸미기

1. 하단 링크에 접속한다.

https://highlightjs.org/

2. get version 11.6.0 (2022.10.21기준) 클릭한다.

 

3. cdnjs, jsdelivr 둘중 하나를 선택하여 복사한다.

3-1. cdnjs

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script>

3-2. jsdelivr

<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/styles/default.min.css"> <script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script>

<script>hljs.initHighlightingOnLoad();</script> 마지막줄에 꼭 추가를 해줘야한다.

4. 블로그 관리 - 꾸미기 - 스킨편집 - html편집을 누른다.

 

html 편집 목록을 보면 요소 위에 cdnjs, jsdelivr 둘 중 복사한 것을 붙혀넣기 해준다. ( 둘중 어느거든 상관없다.)

 

4-1 변경 전 

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>

- default 값을 제거하여 자신이 사용하고 싶은 테마를 선택해서 사용하면 된다.

- 테마 확인은 (https://highlightjs.org/static/demo/) 접속하여 Themes 에서 확인하면 된다.

 

4-2 변경 후

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/atom-one-dark.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>

- Thems에는 atom one dark로 나와있지만 여백에는 하이픈(-)을 사용하도록 한다.

5. 코드블럭 생성하여 확인해보기

보기 좋게 깔끔하게 정리된 모습

 

 

* 설명이 부족하거나 이해가 안가거나 추가 설명이 필요하면 댓글 부탁드리겠습니다.