Highlight.js(cdnjs)로 티스토리 코드블럭 스타일 설정하기

[highlight.js Demo]: highlight.js demo

[cdnjs 공식 사이트]: cdnjs - The #1 free and open source CDN built to make life easier for developers

 

1. cdnjs사이트에서 highlight.js 검색

2. 원하는 styles link 복사

3. 티스토리 스킨 편집 -> HTML 편집에서 원하는 theme로 바꾸면 된다.

 

아래는 내가 적용한 highlight.js 코드다.

<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.0/styles/atom-one-dark.min.css"
integrity="sha512-Fcqyubi5qOvl+yCwSJ+r7lli+CO1eHXMaugsZrnxuU4DVpLYWXTVoHy55+mCb4VZpMgy7PBhV7IiymC0yu9tkQ=="
crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.0/highlight.min.js"
integrity="sha512-8wE/LcEd/WvDjExXAI8nRggDuqyydxAeUokLgRuqAx2RCcyzA4ZJ6nTJ1icQeQCqO3qBFnutIR/IziDQIBQlTg=="
crossorigin="anonymous"></script>
<script>hljs.initHighlightingOnLoad();</script>

*참고*

Visual Studio에서 코드를 복사해 코드블럭에 붙여 넣으면 탭 간격이 기존에 내가 보던 간격과 다르다.

default 탭 간격이 8이므로 CSS 편집에서 다음 코드를 추가하면 탭 간격을 4로 바꿀 수 있다.

.hljs { tab-size:4; }

 

 

4. 글꼴 변경하기 - D2Coding으로

[wan2lang님의 깃허브]: github.com/wan2land/d2coding

 

HTML 편집기에서 다음 코드 추가

<link href="//cdn.jsdelivr.net/gh/wan2land/d2coding/d2coding-full.css" rel="stylesheet" />

 

CSS 편집기에서 Ctrl + f 누르고 pre를 찾는다.

왠지 코드 블럭의 pre 같은 것이 있을 것이다. 그 바로 아랫줄에 pre code.hljs를 찾아서 'D2Coding'폰트를 추가하자. 다른 폰트들도 함께 추가했다. D2Coding을 사용하려면 가장 앞에 적어주어야 한다.

.area_view pre code.hljs { padding: 16px; font-family: 'D2Coding',Menlo,Consolas,Monaco,monospace; }

 

 

 

 

 

cdnjs가 무엇인가는 나중에 알아보자.