티스토리

[Highlights.js] 티스토리 코드블록 색상 꾸미기 :: 테마적용하기

mooyou 2021. 4. 26. 10:35
728x90
300x250

 

 

블로그 특성상 코드를 쓸 일이 많은데 그 전에는 티스토리 기능이 없어서

코드들을 예쁘게 보여주기 위해서 Color Scripter라는 것을 썼었다.

 

moo-you.tistory.com/14

 

블로그에 소스코드 Color scripter로 쉽게 적용하기

티스토리에 소스 코드를 예쁘게 넣는 여러가지 방법이 있지만 저는 Color Scripter가 가장 간단한것 같아서 이 방법으로 하겠습니다. 다른 방식과는 다르게 다운 받을 필요도 없고 그때그때 설정이

moo-you.tistory.com

 

 

 

 

그러다가 티스토리가 개편이 되면서 코드 블록 기능이 생기게 되어 매우 간편하게 코드 등록이 가능해졌고

 

 

 

이거 쓰면 알아서 알록달록 예쁘게 나올 줄 알았다.

 

그러나 기대와는 달리 이렇게 메모장에 쓴 거 마냥 나온다.

왜 글쓰기 화면과 실제 업로드 화면이 다른 건지 의문..

 

 

아무튼 이렇게 마음에 안 들게 나와버리는데 이러면 코드 블럭 쓰는 의미가 있는지..

그런데 다른 블로그들 보니까 예쁘게 잘 쓰던데

 

남들은 뭘쓰나 검색을 해봤더니 Highlights.js 라는것이 있었다.

그래서 나도 포스팅 할겸사겸사 적용시켜 봐야겠다.

 

 

티스토리 블럭코드에 테마 적용하기 ::

 

아래 링크가 Highlights.js의 공식 링크

 

highlightjs.org/

 

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

 

 

highlightjs.org/static/demo/

 

highlight.js demo

 

highlightjs.org

 

위에 주소로 들어가면 다양한 테마를 확인할 수 있다.

 

 

왼쪽에 Themes를 하나씩 눌러서 마음에 드는 테마를 찾는다.

이게 뭐라고 결정장애가 있어서 고르기가 쉽지가 않다.

역시 나는 다크한게 좋은 거 같음 하얀 거는 눈 아프다.

Vs 2015로 골랐다.

 

 

이런 익숙한 느낌

 

 

이제 이걸 어떻게 사용할 것인가..

 

맨 위에 링크에서 

 

Get version 10.7.2 버튼을 눌러보자

그럼 이렇게 cdn을 확인할 수 있다.

 

블로그관리 > 꾸미기에 스킨 편집 > html 편집 > 

 

<head>와 <head>사이에 위에 cdn을 넣어줍니다.

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

default 부분에 자신이 선택한 테마 이름을 넣어주면 됩니다.

저는 Vs 2015를 선택했기 때문에 소문자로 변경해서 vs2015라고 넣어줬습니다.

 

 

 

실행을 위해서 아래 스크립트도 추가합니다.

<script>hljs.initHighlightingOnLoad();</script>

 

 

적용시키면 이런 식으로 코드들이 예쁘게 변경된 것을 확인할 수 있습니다.

 

 

그전에 썼던 메모장에 쓴거마냥 투박했던 코드들이 이제 코드답게 예쁘게 나오는 걸 확인할 수 있다.

728x90
반응형