구문강조 highlightjs 사용법

게시자: 대문 demun 카테고리: 퍼블리셔/기술 2014.06.11 06:00

highlightjs 사용법

이전에 highlightjs 가 어느정도 좋은 구문강조 자바스크립트인지 알아보았습니다.
이걸 티스토리에 적용하는 방법과 테마에 대해서 알아보겠습니다.

티스토리에 적용하기

티스토리에 적용하려면 먼저 홈페이지에서 파일을 다운로드 받습니다.

highlightjs 홈페이지 다운로드 - http://highlightjs.org/download/

압축을 풀면 많은 파일이 나옵니다.
필요한 파일은 highlight.pack.js 과 css 파일입니다.

먼저 자바스크립트인 highlight.pack.js 를 업로드 하세요.
그리고 사용하고자 하는 css 파일을 업로드하세요.
파일은 style 폴더 안에 있는 아무 파일이나 사용하고자하는 css파일 하나만 업로드하면 됩니다.

이제 스킨 편집에 가셔서 html을 수정합니다.

css 는 아래처럼 추가해줍니다.
예제는 github.css 파일로 합니다.

<head>
.....
<link rel="stylesheet" href="./images/github.css">
....
</head>

css 는 반드시 head안에 넣어야 합니다.
다음은 스크립트파일인데요 이것은 바로 위에 넣습니다.

......
<script src="./images/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
....
</body>

그러면 설정은 끝났습니다. 만약 jQuery 를 사용하고 있다면 아래처럼 사용하는것이 더 좋습니다.

......
<script src="./images/highlight.pack.js"></script>

<!-- 
티스토리의 본문은 대부분 entry 클래스를 가진 div 안에 넣습니다.   
그래서 entry 안에 있는 pre를 선택한겁니다. 
-->
<script>$('.entry pre').each(function(i, e) {hljs.highlightBlock(e)});</script>
....
</body>

테마 사용하기

highlightjs 는 테마가 정말 많습니다.
저도 sublimetext 를 사용하기때문에 monokai_sublime 테마와 github 테마중 어떤걸 사용할지 갈등을 많이 했을 정도 입니다.

style 폴더에 보면 이미지가 3장이 있습니다.
배경으로 사용하는 이미지인데요 테마마다 사용하는 경우가 있습니다.

해당 파일을 업로드하고 head 부분에 업로드한 파일명만 변경하면 됩니다.
위에서는 github.css 를 올렸다면 이번에는 monokai_sublime.css 로 변경했다고 가정하면 아래와 같습니다.

<head>
.....
<link rel="stylesheet" href="./images/monokai_sublime.css">
....
</head>

어떤 테마를 사용할지 고민이시라면 홈페이지의 테마를 미리보기할수 있습니다.
테마명을 클릭하면 변경된 테마를 볼 수 있습니다.

테마 사이트 -> http://highlightjs.org/static/test.html






신고

댓글

  1. 2014.06.21 23:59 신고 BlogIcon ludensk  댓글주소  수정/삭제  댓글쓰기

    예전에는 파일을 하나하나 올려서 적용했었는데, 요즘에는 그냥 CDN을 활용하는게 엄청 편하더군요ㅎㅎ
    http://cdnjs.com/libraries/highlight.js

  2. 2014.07.30 11:49 신고 BlogIcon ㅋㅋ두유  댓글주소  수정/삭제  댓글쓰기

    여기까지 다 적용을 했을때, 이걸 티스토리 포스팅상에서 현재 작성자님 포스팅 모습처럼 어떻게 써요?
    그냥 다른 명령어는 줄 필요없이 <pre>코드내용</pre> 식으로만 사용하면 되는건가요?
    저는 현재 syntaxhighlighter이것도 티스토리에 깔려있거든요. highlightjs를 쓰려면 syntaxhighlighter이걸 지우고 해야하나요?;;;

    • BlogIcon 대문 demun 2014.08.01 09:52 신고  댓글주소  수정/삭제

      syntaxhighlighter 과 highlightjs 는 같은겁니다. 둘다 구문강조하는 스크립트죠. 어떤걸 사용할건지는 본인의 몫이구요.

      highlightjs를 위처럼만 따라하시면 본문에 있는 모든 <pre> 태그에 구문강조가 됩니다.

      <pre>코드내용</pre> 식으로만 사용하면 되는건가요?
      그렇습니다.

      <script>$('.entry pre').each(function(i, e) {hljs.highlightBlock(e)});</script>
      이 구문까지 다 넣으셔야 합니다.

  3. 2014.08.02 14:08 신고 BlogIcon ㅋㅋ두유  댓글주소  수정/삭제  댓글쓰기

    답변 감사드려요! 흠 근데 저는 뭔가 좀 잘 안되네요..;;

    1. <,>, 이런게 작성하면 그대로 안뜨는거 같던데.. 이런건 어찌해야할지요.

    2. 위에 포스팅하신거처럼 검은 배경부분이 포스팅 끝까지 안가고 중간에 테두리가 생겨요.
    이미지 : http://markquery.com/community/files/attach/images/127/908/010/8e354662ed5e92430fdb5f6041280530.png
    이렇게 말이죠;;;;;;

    • BlogIcon 대문 demun 2014.08.03 16:19 신고  댓글주소  수정/삭제

      제가 도사도 아니고....이미지만 보고 어떻게 해결을 하겟습니까?????

      해당 링크를 줘야 제가 소스를 보고 알려드리죠.....


      일단 마크쿼리 스킨은 pre 에 padding 값이 있을겁니다. 그래서 해당부분에 회색으로 배경이 들어간겁니다.

      회색으로 들어간곳에 배경을 빼고, padding 도 빼야합니다.

      -----
      pre 에 스타일을 주는것이므로 스킨에 들어간 pre 부분하고 겹칩니다. 그래서 스킨에 적용된 pre 부분의 스타일을 수정해줘야 합니다.

      ----

      이렇게 말하면 모르시겠죠..ㅎㅎㅎㅎ

      그러니 링크를 알려주시고, 제가 해당 링크의 소스를 봐야 정확하게 도움을 줄 수 있어요....

  4. 2014.08.03 21:46 신고 BlogIcon ㅋㅋ두유  댓글주소  수정/삭제  댓글쓰기

    해결했어요^^ 답변 감사해요!ㅎㅎㅎ도움 많이 되었네요