티스토리 코드 블럭 플러그인 중에서 가장 많이 사용하는 highlight js를 적용 하겠습니다. highlight js는 테마가 다양하고 적용하기도 편해서 가장 많이 사용 합니다.
1. 원하는 테마 찾기
highlight.js
Version 10.3.2 Tiny tiny release, just to fix the website incorrectly not listing Javascript in the list of languages you could choose for a custom build. There are no other changes.
highlightjs.org
highlight js 사이트를 방문 하셔서, 원하는 테마를 찾습니다. 위의 그림처럼 원하는 프로그램 language와 style을 클릭하면 변화는 스타일을 확인 하실수 있습니다.
2. 스타일 파일 다운로드
[Get version 클릭] -> [Downlad 클릭]
[highlight.pack] 파일과 [styles] -> [원하는 코드 스타일] 파일 2가지를 자신의 티스토리의 파일 업로드 시켜줘야 합니다.
3. 티스토리의 파일 업로드
[티스토리 스킨 편집] -> [html 편집] -> [파일 업로드]의 위에서 찾은 [highlight.pack] 파일과 [원하는 코드 스타일] 파일을 업로드 시켜 줍니다.
4. HTML 소스 적용
다시 HTML 탭으로 돌아와서 <head></head> 태그 사이의 아래 소스코드를 복사/붙여넣기 해줍니다.
<!-- highlight 적용 -->
<link rel="stylesheet" href="./images/darcula.css">
<script src="./images/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!-- highlight 적용 END -->
마지막으로 위에 소스 중에서 변경해야 할 부분이 있습니다. 'darcula' 라고 써져 있는 글자를 위에서 선택한 [원하는 코드 스타일] 파일 이름으로 변경해 주세요.
<link rel="stylesheet" href="./images/darcula.css">
5. 적용
[적용] 버튼을 눌러주시면 끝 입니다. 위 이미지와 같이 원하는 코드 스타일로 변경된 것을 확인 할 수 있습니다.
'티스토리 플러그인' 카테고리의 다른 글
| 티스토리 블로그 구독 버튼(기능) (0) | 2020.07.01 |
|---|