highlight.js 이란?
이전 글에서 Syntax Highlight 플러그인을 설정하는 방법을 알아보았습니다.
Syntax Highlight는 티스토리에서 기본적으로 코드 문법을 강조해 주는 플러그인입니다.
기본적인 테마와 프로그래밍 언어만 제공하다 보니 원하는 테마와 프로그래밍 언어가 없을 수 있습니다.
highlight.js는 Syntax Highlight와 비슷한 코드 문법을 강조해 주는 플러그인입니다..
단지 티스토리에서 제공해 주는 것이 아닌 직접 설정해야 하는 번거로움이 있습니다.
설정하는데 엄청난 난이도가 필요하진 않으므로 필요하다면 사용해도 좋을 것입니다.
highlight.js는 197 프로그래밍 언어를 지원하고 248 테마를 지원합니다.
Syntax Highlight 보다 훨씬 많이 지원하며 꾸준히 업데이트되고 있습니다.
highlight.js 테마 선택
highlight.js 테마를 많이 제공하기 때문에 하나씩 모두 설정하고 확인하기는 너무 힘듭니다.
이러한 수고를 덜기 위해 highlight.js에서 미리 볼 수 있는 페이지를 제공해 줍니다.
테마에 따라 프로그래밍 언어별로 강조되는 것을 볼 수 있습니다.
highlight.js demo (highlightjs.org)
highlight.js demo
highlightjs.org
원하는 테마를 선택했다면 선택한 테마의 이름을 기억해 둡시다.
설정할 때 테마 이름을 사용하게 되기 때문입니다.
highlight.js 설정하기
우선 다음 링크를 통해 highlight.js 공식 사이트로 이동해 봅시다.
highlight.js (highlightjs.org)
highlight.js
Version 10.7.2 This is a patch release. The only change is that deprecation messages are throttled and shown only once.
highlightjs.org
사이트로 이동하여 Get version ... 버튼을 찾아 누르면 다음 페이지로 이동합니다.
이동한 페이지를 살펴보면 여러 가지 옵션들이 있습니다.
복잡해 보이지만 highlight.js를 설정하기 위한 방법으로 크게 두 가지 방법이 있습니다.
1. CDN을 이용하는 방법 - 설정이 편합니다.
2. 파일을 다운로드하여 티스토리에 업로드하는 방법. - CDN 서비스가 원활하지 않을 때 유용합니다.
두 가지 방법 중 자신이 원하는 방법으로 설정하면 됩니다.
다운로드 이용하여 설정하기
개인적으로 추천하는 방법으로 CDN 이용하는 경우 원활하지 않는 경우가 있습니다.
페이지 아래쪽으로 내려가면 다음과 같이 프로그래밍 언어들을 체크할 수 있습니다.
많이 사용하는 언어들은 기본적으로 체크되어 있습니다.
추가적으로 추가하고 싶다면 원하는 언어를 찾아 추가하면 됩니다.
프로그래밍 언어들을 체크를 한 후 리스트 아래 Download 버튼을 눌러봅시다.
highlight.zip 파일을 다운을 받고 적절한 곳에 압축을 풀어 봅시다.
압축을 푼 폴더 내에 다음 파일들을 사용하게 됩니다.
styles 폴더 내에 원하던 테마 파일을 찾으면 됩니다.
highlight.min.js
styles\원하는테마파일.css
자신의 티스토리 블로그관리 페이지에서 다음과 같이 이동합니다.
블로그관리 페이지 사이드바 -> 꾸미기 -> 스킨편집 -> html 편집 -> 파일업로드
파일업로드에서 두 파일을 업로드합니다.
원하는 테마 파일이 여러 가지라면 모두 업로드하면 됩니다.
여기서는 a11y-dark 테마를 적용하였기 때문에 a11y-dark.min.css 파일을 업로드하였습니다.
HTML 편집기로 돌아와서 다음 코드를 추가하면 됩니다.
첫 번째 라인에 업로드한 테마 파일 이름으로 변경하면 됩니다.
<link rel="stylesheet" href="./images/a11y-dark.min.css">
<script src="./images/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
코드는 <head> </head> 사이에 추가하면 됩니다.
<!DOCTYPE html>
<html lang="ko">
<!-- <head> </head> 사이에 추가하자. -->
<head>
...
<link rel="stylesheet" href="./images/a11y-dark.min.css">
<script src="./images/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
...
</body>
CDN 이용하여 설정하기
CDN을 이용하여 설정하는 방법으로 크게 어려움이 없습니다.
외부에서 제공해 주는 서비스를 이용하는 방법이므로 사용하는 스킨에 코드 몇 줄만 추가하면 됩니다.
CDN이란?
콘텐츠 전송 네트워크 (Content Delivery Network 또는 Content Distribution Network) 약자다.
콘텐츠를 빠르고 효율적으로 전달하기 위해
여러 노드를 가진 네트워크에 데이터를 저장하여 제공하는 시스템이다.
CDN을 이용하면 페이지 로드 속도를 높여 준다.
highlight.js에서는 cdnjs , jsdelivr, unpkg 세 가지의 CDN 서비스를 제공해 줍니다.
세 가지 중 원하는 서비스를 선택하면 됩니다.
이 글에서는 첫 번째 cdnjs에서 제공하는 CDN을 이용합니다.
다른 CDN 서비스도 방법은 동일하며 이용하는 코드만 다를 뿐입니다.
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
위의 코드를 복사한 후 자신의 티스토리 블로그관리 페이지에서 다음과 같이 이동합니다.
블로그관리 페이지 사이드바 -> 꾸미기 -> 스킨편집 -> html 편집
HTML 편집기에서 <head> </head> 사이에 복사한 코드를 붙여 넣습니다.
적용하면 highlight.js의 CDN 설정은 끝납니다.
하지만 이대로 적용을 한다면 highlight.js의 기본 테마로 설정됩니다.
이전 파트에서 원하는 테마를 기억해 두기로 한 것을 사용합니다.
복사한 코드에서 default를 찾아 원하는 테마 이름으로 변경합니다.
다음 예제처럼 테마별로 추가하는 것이 아니라 하나만 사용하는 것입니다.
예제로 보여주기 위해서 추가한 것입니다..
<!DOCTYPE html>
<html lang="ko">
<!-- <head> </head> 사이에 추가하자. -->
<head>
...
<!-- 기본 테마 -->
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<!-- a11y-dark 테마 적용한 예시 --> <!-- default를 변경-->
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/a11y-dark.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
</head>
<body>
...
</body>
테마 이름의 띄어쓰기가 되어 있는 경우는 일반적으로 - (하이픈) 기호를 넣어주면 됩니다.
정확한 이름을 확인하기 위해서는 다음 페이지에서 테마 이름을 찾아 넣어주면 됩니다.
파일 확장자는 신경 쓸 필요 없이 이름만 참고합니다.
예를 들면 a11y dark 테마는 a11y-dark.css 파일의 a11y-dark 이름을 사용합니다.
default를 a11y-dark으로 변경하면 됩니다.
이름 참고용 · highlight.js · GitHub
GitHub - highlightjs/highlight.js: JavaScript syntax highlighter with language auto-detection and zero dependencies.
JavaScript syntax highlighter with language auto-detection and zero dependencies. - GitHub - highlightjs/highlight.js: JavaScript syntax highlighter with language auto-detection and zero dependencies.
github.com
주의사항
highlight.js 사용하게 된다면 Syntax Highlight 플러그인을 해제해야 합니다.
Syntax Highlight 플러그인이 적용되어 있다면 Syntax Highlight 플러그인이 작동합니다.
글쓰기에서 사용하는 방법은 Syntax Highlight 플러그인과 사용하는 방법은 동일합니다.
