[티스토리] 코드하일라이트적용하기 (highlightjs)

인터넷에 여러가지 방법이 있지만, 지금 소개하는 방법은 따로 html tag 를 작성하지 않아도 된다.

마크다운 편집기를 통해서 코드 하이라이팅이 자동으로 되는것 확인함.

<동작예>

highlight js 설정

highlightjs 는 SyntaxHighlighter 보다는 가볍다. 기능이 진짜 하이라이트 기능만. 있기때문에 가볍게 쓰기 좋다. 게다가 깔끔하기도 하고.. 어째튼 개인취향으로는 highlightjs 가 가장 심플하고 가독성이 좋다.

js 코드 다운로드 하기

https://highlightjs.org 을 방문하여 highlight.pack.js 와 원하는 theme css 를 받는다.

• 특이사항
  • js 파일의 사이즈 최적화를 위하여, 원하는 언어를 선택하여 다운로드 가능하다.
  • 스타일 css 파일들도 여러가지 있으니 원하는 스타일로 다운로드 받는다.

js 코드 업로드

https://highlightjs.org 에서 받은 highlight.pack.js 과 theme css 를 테마 폴더에 업로드 한다.

테마 수정란에서 업로드 방법은 구글에서 설명이 많으니 생략 (https://kingle1024.tistory.com/116 참고하시길<>)

티스토리 테마 수정

자신의 티스토리 테마의 index.hmtl 파일을 수정한다. head 부분에 다음과같은 내용을 추가한다.

<script src="./images/highlight.pack.js"></script>
<link rel="stylesheet" href="./images/tomorrow-night-blue.css" /> 
<style type='text/css'>
    .hljs {
            font-family:d2coding;
    }
</style>
<script>hljs.initHighlightingOnLoad();</script>

href="./images/tomorrow-night-blue.css" 의 부분은 자신이 받은 테마파일을 적으면된다. 본 블로그의 theme 는 tomorrow-night-blue 를 약간 수정한 내용으로 쓰고있다.

사용하기

간단하다. 티스토리의 markdown 기준으로 코드 작성하는것과 동일하게 작성하면된다.

\```코드명
코드내용
\```

따로 html 쪽 코드의 class 를 수정하는식으로 번거롭게 하지 않아도 된다.

css 사용팁

일반적인 code 와 highlightjs 하이라이팅 코드의 스타일이 겹쳐서 이상동작하게 되는경우가 있다.

이때는 스타일부분에 다음과 같이 hljs class 쪽을 수정해주면된다.

.article_view  .hljs {
}

끗