highlight.js (문법강조) 적용하기 및 설정

코드블럭으로 입력한 소스를 알록달록 예쁘고 보기 쉽게 만들어 주는데는 여러 방법이 있는데...

 

요롷게?

 

그중 티스토리와 가장 찰떡궁합인 highlight.js 를 적용하는 방법을 알아보자!

(줄번호 추가는 2020/08/16 - [웹 코딩/티스토리] - 코드블럭 - 줄번호 표시하기 참고)

 

방법1: '코드 문법 강조' 플러그인 사용

테마 고르고 [적용] 하면 끝

 

이건 뭐 딱히 설명이 필요 없을듯.. 가장 심플한 방법이라 (아마 다들 알아서 쓰고 계실듯..)

편리함이 장점이라면, 단점으로는 사용가능한 테마가 제한적이고 버전 업데이트가 안되고 탭간격 같은 옵션 적용불가

 

방법2: '코드 문법 강조' 플러그인 사용을 해제하고 직접 highlight.js 를 스킨에 추가하기
[스킨 편집] > [html 편집] > [HTML] 내용 하단 </body> 바로 윗줄에 아래 소스를 넣고 [적용]하면 끝

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/default.min.css" integrity="sha512-kZqGbhf9JTB4bVJ0G8HCkqmaPcRgo88F0dneK30yku5Y/dep7CZfCnNml2Je/sY4lBoqoksXz4PtVXS4GHSUzQ==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js" integrity="sha512-7t8APmYpzEsZP7CYoA7RfMPV9Bb+PJHa9x2WiUnDXZx3XHveuyWUtvNOexhkierl5flZ3tr92dP1mMS+SGlD+A==" crossorigin="anonymous"></script>
<script>
	hljs.configure({tabReplace: "    "});
	hljs.initHighlightingOnLoad();
</script>

방법1에 비해 조금 손이 더 가지만, 그래도 방법1의 단점들을 모두 커버하기에 충분히 가치가 있음

(외부 cdn 파일을 링크 하는 방식이 싫으면 두 파일을 직접 다운받아 스킨에 업로드하고 주소를 잘 바꿔 써주면 됨)

 

추가 설명:

• 소스 1번줄에 추가된 css 파일이 앞으로 이용할 테마가 되겠는데, 기본 말고 다른걸 쓸려면,
  먼저 https://highlightjs.org/static/demo/에 가서 데모를 둘러보고 마음에 드는 넘의 이름을 기억하자
  그리고선 https://cdnjs.com/libraries/highlight.js/10.1.2 에 가서 그넘의 css 주소를 복사해서 소스의 href 부분을 바꿔주면 됨 (개인적으론 Androidstudio 나 Github 도 마음에 듬)
  아니면 그냥 바로 파일명을 맘에 든 테마의 이름으로 바꿔줘도 됨 (단, 모두 소문자이고 공백은 - 로 바꿔줘야 함)
  예: cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/androidstudio.min.css
• 소스 2번줄에 js 는 현재의 최신 버전인데, 버전 10부터 플러그인도 지원하고 최근 새로나온 아이라 여러모로 좋긴할텐데 IE 11을 포함 이전세대 구형 브라우저들을 지원하지 않는다는 제한이 있다. 만일 이게 거슬린다면 src를 버전 9의 최종인 cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.3/highlight.min.js 로 바꿔주면 됨
  (최신과 구버전을 브라우저에 맞춰 동시에 적용하는 방법은 따로 포스팅 (클릭) 했습니다.)
• 소스 4번줄이 바로 탭간격을 조절하는 옵션이다
  hljs.configure({tabReplace: "    "}); 기본인 1탭을 4스페이스로 바꿔준다. (난 2스페이스 사용중)
• 소스 5번줄이 강조를 적용하는 부분인데 혹시 페이지 로딩이 다 끝나고 적용되는게 싫다면 hljs.initHighlighting(); 로 바꿔주면 된다.