tistory에 highlight.js를 적용하여 코드 강조하기

목적

• highlight.js 적용하여 코드 강조하기

문제점

• 마크다운 모드에서 `을 3개 사용하면, 코드 블럭을 만들 수 있다.
• default 코드 블럭 스타일을 사용하면 코드를 알아먹기 힘들다.
• IDE에서 표시되는 효과를 사용하기 위해 highlight를 적용한다.

스타일 고르기

• 데모 페이지 왼편의 Style에서 자신이 원하는 스타일을 고른다.
• 주소 : https://highlightjs.org/static/demo/

적용하기

• 아래는 VS2015가 적용된 환면이다.

  

• html 편집창에서 태그 이전에 아래 코드를 입력한다.

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/vs2015.min.css"> 
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script> 
  
  <script>hljs.initHighlightingOnLoad();</script>

결과

int number = 0