제가 이 블로그에서 다뤄보고자 하는 주요 주제 중 하나가 프로그래밍이기 때문에 코드 하이라이트 기능은 필수입니다. 이 블로그는 티스토리 기반이기 때문에 티스토리에서 코드 하이라이트 기능을 추가하는 방법을 찾아보았습니다.
1. 블로그에 코드 추가하기
블로그 포스트에 코드를 추가하는 방법은 블로그 편집 메뉴에서 아래와 같이 코드블럭 메뉴를 클릭하면 됩니다.
그리고 나서 아래와 같이 팝업 편집창에 뜨면, 1) 언어를 선택한 후 2) 삽입할 코드를 복사하여 붙여넣고 3) 확인버튼을 눌러서 코드를 추가하면 됩니다.
짜잔 ~~~
흠.. 결과가 기대했던 것과는 많이 다르네요... 확인해보니 추가적인 플러그인이 더 필요하다고 하네요. 디폴트로 제대로 된 하이라이팅을 지원해주면 참 좋을 거 같은데 ... 좀 아쉽네요.
하지만, 플러그인 설치는 개발자의 숙명!! 까짓거 추가로 설치해보죠.
플러그인은 티스토리 블로그 관리자 페이지에서 지원하는 플러그인 설치 기능을 사용할 수도 있고, 외부 라이브러리를 사용할 수도 있습니다.
저는 추후 Vue.js로 웹애플리케이션을 개발할 때도 활용할 수 있는 highlight.js 라는 외부 라이브러리를 사용할 겁니다.
2. Highlight.js 적용하기
우선 https://highlightjs.org 에 접속합니다. 현재버전(10.3.0) 기준으로 189개의 언어와 95가지 스타일을 지원한다고 하네요. 버전이 올라가면 더 많은 언어와 스타일을 지원하겠지요.
랜딩페이지의 Usage 메뉴를 클릭합니다. Getting Started 섹션에 하나의 CSS 파일과 highlight.js 파일을 링크하고, 페이지가 로딩될 때 hljs.initHighlightingOnLoad(); 메소드를 호출하면 사용할 수 있다고 나와있네요. 그리고 스크롤 해보면 다양한 프레임워크에서 빌드하는 방법과 CDN을 통해 호스팅되는 prebuilt 버전을 사용하는 방법에 대한 가이드가 나와 있습니다. 오! Vue.js 도 있군요 :D
티스토리는 CDN 호스팅 방식을 사용하는 것이 가장 편리합니다. 저는 cdnjs와 jsdelivr 중 cdnjs를 선택하도록 하겠습니다.
그 다음에 할일은 스킨을 편집하는 것입니다. 아래 그림처럼 관리자 페이지에서 스킨 편집 메뉴를 클릭합니다.
아래 그림같은 편집 페이지가 열리면, html편집 메뉴를 클릭합니다.
HTML 탭을 선택한 상태로 </head> 전에 아래 표시된 코드를 추가하고, 우측 상단에 있는 적용 버튼을 클릭합니다.
<!-- ### highlight.js ### -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/night-owl.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js"></script>
<!-- and it's easy to individually load additional languages -->
<script charset="UTF-8" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/languages/go.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<style>
pre { padding: 0px; font-size: 16px; }
.post-content img {
border: 1px solid #dddddd;
}
</style>
앞에서와는 다르게 멋지게 코드가 하이라이트 되는군요. 추가된 코드에서 가장 첫 라인은 주석이고, 그 다음 라인은 코드 하이라이트 스타일을 지정하는 CSS 파일을 링크하는 코드입니다. 저는 Visual Studio Code에서도 애용하는 Night Owl 스타일을 적용하였습니다.
만약 다른 스타일을 적용하고 싶다면, highlightjs.org/static/demo/ 페이지에 가서 원하는 스타일을 고르시면 됩니다. 만약 Atom One Dark 스타일을 원한다면, 대문자를 모두 소문자로 바꾸고, 띄어쓰기를 dash(-) 로 변경해서 아래처럼 적어주면 됩니다.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/atom-one-dark.min.css">
<style> ~ </style> 블럭은 첨부된 코드의 폰트 크기를 조정하고, 포스트에 추가된 이미지의 보더 스타일을 수정한 부분입니다. 생략해도 코드 하이라이트를 적용하는 데는 전혀 문제가 없습니다 :D
※ 아래 사이트를 제외하고 이 포스트의 복제를 금지합니다.
