개요
블로그 포스트 내용 중 코드박스에 해당 하는 부분이 하이라이팅이 되지 않아 해당 기능을 구현하고자 한다.
highlight.js
highlight.js는 스크립트 파일 하나와 CSS 파일 하나로, 코드를 코드 에디터처럼 정돈해주는 라이브러리이다.
언어 지원
현재 197개의 언어를 지원하고 있다.(22.10.01기준) 단, CDN 이용 시 22개의 언어만 사용 가능 한 것으로 알고 있다. 지금 개발 중인 블로그에서는 기본적인 주 언어만 필요하다 판단되어 간편하게 CDN을 이용하였고 필요 시 다운로드를 받아 확장 예정이다.
스타일 지정
언어의 종류에 이어 248가지의 스타일 지정도 가능하다. 이를 이용해 코드블럭의 background 색상이나 codehighlight 색상도 기호에 맞게 변경 가능하다. 다른 스타일 지정 방법은 밑에서 설명하겠다.
CDN 이용하기
위에서 설명하였듯 현재 개발중인 블로그는 CDN을 이용하였고, 방법은 다음과 같다.
- base.html의
head태그 사이에 아래의 코드를 넣는다.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>스타일의 변경하려면 첫 줄의 default.min.css 코드를 변경하면 된다.
예를들어, 현재 Androidstudio 테마를 적용하고 있는데, 다음과 같이 코드를 넣었다.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>결과 예제
변경 전
변경 후
성장하는 개발자