[티스토리] 소스코드 이쁘게 삽입하기 (Feat. highlight.js)

08/26/2020 - v10.1.2

 

개발용 블로그에는 아무래도 소스코드를 삽입할 일이 많은데 티스토리에서 기본으로 제공하는 것은 별로 맘에 들지 않더라고요.

다크 테마를 좋아해서 소스코드라도 다크 테마를 하고 싶기도 했고요.

이래저래 찾아보니 highlight.js가 여전히 쉽고 편해서 많이 쓰는 거 같더라고요.

그래서 저도 이거를 기반으로 꾸미기로 했습니다 !!!

 

highlight.js의 홈페이지는 다음과 같습니다.
 
https://highlightjs.org/

highlight.js 소개

먼저 링크에 있는 홈페이지로 갑니다.

노란색 박스로 표시한 Usage를 눌러서 사용법을 확인해 봅시다.

필요한 css파일과 js파일을 설정해주고, hljs.initHighlightingOnLoad() 함수를 실행하면 되는 군요.

나중에 포스팅을 할 때, <pre><code class="language">...</code></pre> 형태로 사용하면 되고요.

역시 간단하네요.

이제 스크롤을 좀 더 내려봅시다.

저는 위에서 언급했던 css파일과 js파일을 설정해줄 때 이 CDN 호스팅 방법을 사용하려고 합니다.

이 방법을 사용하면 알아서 링크로 해당 파일을 받아와 적용해주기 때문에 간편합니다.

스샷에도 써 있듯이 빠른 로딩을 위해 특정 언어들만 선택해서 받을 수도 있지만 그냥 기본 언어들 전부 받겠습니다. 

highlight.js 적용

이제 티스토리 관리 메뉴로 가서 스킨 편집 메뉴로 갑니다.

헤드 태그안에 highlight의 cdn 링크를 넣어주고, 적용을 합니다.

눈썰미 좋으신 분들은 highlight.js 홈페이지에서는 default라고 되어있는데, 왜 저는 dracula인지 궁금하실 겁니다.

이 부분이 바로 색상 테마를 설정하는 부분이고, 저는 너무나 유명해서 공식 홈페이지까지 있는 dracula 테마를 적용한 것입니다.

 

혹시 퍼가실 분들과 예제를 위해 아래에 코드도 첨부하겠습니다.

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

한동안은 버전이 바껴도 버전 부분의 숫자만 바꿔주면 잘 동작할거라 예상을 하지만, 혹시 뭔가 많이 바낀다면 다시 포스팅 해보도록 하겠습니다.

저같은 경우 캐쉬때문인지 적용을 해도 반영이 죽어라 안되다가 한참 지나니 반영이 되더라고요... 혹시 바로바로 적용이 안되더라도 참고해 주세요. 전 당시에 바로 적용이 안되서 당황해서 생각하지 못했는데, 브라우저의 private window기능을 사용하면 캐쉬없는 로딩이 가능해서 바로바로 확인을 해봤을 수 있었을텐데... 하는 아쉬움이 있네요. ^^a

highlight.js 테마 변경

다음은 다른 스타일로 변경해보고 싶은 분들을 위해 준비를 해봤습니다.

 

아래의 링크를 따라 가시면, 엄청난 종류의 색상을 볼 수 있습니다.

https://github.com/highlightjs/highlight.js/tree/master/src/styles

 

그리고 이 곳에서 샘플을 보실 수 있습니다.

https://highlightjs.org/static/demo/

 

원하는 스타일을 고르셨으면 저처럼 해당하는 이름을 넣어주시면 되고요, 반.드.시. 원하는테마.min.css 잊지마세요~!!

min을 붙여주면 불필요한 공백 제거 등을 통해 파일 사이즈를 줄여서 빠른 로딩을 가능하게 해줍니다.

 

부디 원하는 설정을 하시기를 바래용~ 

구글 폰트 사용

저는 최근에 개발할 때 주로 MS사의 cascadia-code 폰트를 사용했었지만, 블로그에는 Adobe 사의 source code pro 폰트를 사용해보겠습니다.

 

구글폰트 사이트로 갑니다.

구글 폰트 사이트는 다음과 같습니다.

https://fonts.google.com

원하는 폰트를 검색해 줍니다.

이제 원하는 스타일을 select this style을 눌러 담아줍니다.

사용을 위해 Embed 탭으로 갑니다.

CSS에 직접 포함시켜줄 거니 @import로 갑니다.

 

이제 블로그 스킨 편집 화면으로 다시 가 주시고, CSS를 열어 주세요.

그럼 이제 폰트를 포함시켜볼까요?

기존에 포함되었던 폰트 아래쪽으로 방금 받아온 폰트를 포함시킵니다.

이제 사용할 준비가 끝났네요!

간단하죠?

소스코드 스타일링

개인적으로 highlight.js를 적용한 후에도 썩 맘에 들지 않았습니다.

너무 각져있는데다 포스팅 너비랑 똑같이 꽉차 있어서 그다지 느낌이 좋지 못했어요.

그~래~서~ 저는 디자인에 수정을 좀 주었습니다.

 

스킨 편집에서 CSS탭으로 갑니다.

사용예에서 보셨겠지만, <pre><code> 형태로 사용을 하기 때문에 combinator로 소스 코드 부분을 선택합니다.

화면에 꽉차고 다닥다닥 붙는 게 싫어서 약간의 마진을 주었고, 각진 네모가 싫어 모서리를 약간 둥글게 해주었습니다.

코드가 왼쪽에 너무 치우쳐 있는 것도 보기 싫어서 패딩으로 띄워 주었는데, 이 때 !important가 정말정말 중요합니다.

highlight.js에서 기본 스타일링이 되어 있어서 우리 설정이 적용이 안되니 반드시 강제로 덮어쓰라고 명시를 해야 적용이 됩니다.

기본 폰트가 너무 커서 보기 흉하니 폰트 크기도 줄여주고, 마지막으로 우리가 원하는 폰트를 설정해 줍니다.

 

역시나 퍼가실 분들을 위해 코드 첨부합니다.

pre > code {
  margin: 8px;
  border-radius: 8px;	
  padding-left: 8px !important;
  font-family: 'Source Code Pro', monospace;
  font-size: 12px;
}

간단하게 스타일링까지 끝내니 이제야 뭔가 보기가 좋네요. ^- ^/

 

각자 설정한 블로그 스킨과 선택한 highlight.js 테마 등에 따라 기본 스타일링이 달라서 무작정 따라하시기 보다는 본인이 원하시는 대로 적절히 수정하셔서 사용하기를 추천드려요. ^^