개발자나 소스 코드 위주의 블로그를 운영한다면 코드가 한눈에 보이도록 하는 것은 중요한 것이다. 간단하게 소스 코드 주위를 <pre></pre>코드로 감싸기만 하면 자동으로 색을 넣어주는 highlight.js의 사용법에 대해 소개한다.
highlight.js는 무엇인가?
- JavaScript 라이브러리
- HTML 태그 안의 소스 코드를 자동으로 하이라이트
- 언어를 자동 감별
- 여러가지 언어 및 테마 사용 가능
링크 및 다운로드
사용방법
html에 아래 코드를 추가하여 라이브러리 및 css를 로드시킨다.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/monokai.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
<script>
window.addEventListener("DOMContentLoaded", function() {
hljs.initHighlightingOnLoad();
}, false)
</script>
참고로 사용된 테마인 monokai.min.css 의 부분을 위의 지원 css리스트에서 찾아 .min.css의 앞부분만 바꾸면 된다. 적용후 사용 방법은 <pre> 소스 코드 </pre> 로 감싸주기만 하면 된다.
'Dev > Blog|Web' 카테고리의 다른 글
| 티스토리 스킨 사이드바에 달력 캘린더 모듈 넣기 (feat.고래스킨) (0) | 2023.03.12 |
|---|