프로그래밍 코드를 웹에 올리다 보면, Plain Text로는 무슨 말인지 알수가 없는 경우가 많다.
그래서 하이라이트를 해주기 위해서 여러 사이트들의 도움을 받는데, 그 중에 이 블로그에서는 highlight.js를 사용해서 구현했다.
크게 그 이유를 보면...가볍고 빠르고..가장 중요한 것은 내가 가장 좋아하는 sublime text 포맷이 있다는 것이다. 물론 GitHub 포맷도 있다. 그리고 CDN 베이스로 converting을 하지 않아도 그냥 쓸수 있다는 점이다.
물론 라인 수를 안 보여주는게 좀 마음에는 안 들지만..세상에 어찌 다 맘에 드는게 있으리오.
비교
http://softwaremaniacs.org/blog/2011/05/22/highlighters-comparison/
| highlight.js | SyntaxHighlighter | SHJS | Google Code Prettify |
|---|
| User markup in code snippets | yes | no 1) | yes | yes |
|---|
| Line numbers | no | yes | no | yes |
|---|
| Striped background | no | yes | no | yes |
|---|
| Replacing indenting TABs with spaces | yes | yes | no | no |
|---|
| Language detection | yes | no | no | yes 2) |
|---|
| Multi-language code | yes | yes 3) | no | yes |
|---|
| Arbitrary HTML container for code | yes | no | no | no |
|---|
| HTML5 compatibility 4) | yes | no | no | no |
|---|
사용법
https://highlightjs.org/usage/
사용은 아주 간단하다. 글을 HTML 형식으로 바꾸고 <Head> 와 </Head> 사이에 아래의 구문을 넣는다 .
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/monokai_sublime.min.css" rel="stylesheet"></link>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
여기서 스타일 변경을 위해서는 .min.css 앞에 스타일 이름을 변경한다.
기본으로는 default.min.css로 되어 있다.
참고할 점 : 이름이 두개인 경우 보통 _로 연결함 - 예시 monokai_sublime.min.css
그리고 실제 코드 부분에 앞에는 <pre><code>그리고 끝나는 지점에는 </code></pre>
를 입력해 주면 된다.
간단하게 적용된 예제 페이지 :
https://sysnet4admin.blogspot.kr/2017/06/infopy.html#.WTihyWiLQuU
이 블로그에서 주로 사용하는 스타일은
monokai_sublime.min.css와 github.min.css 이다.
전자는 파이썬 코드를 넣을때, 후자는 리눅스 쉘 커맨드를 쓸때 주로 사용한다.
데모
https://highlightjs.org/static/demo/
스타일들은 여기 모여 있다 본인이 사용하는 언어와 스타일을 찾아서 위에 사용법에 맞게 변경해 주면 된다.
참고 사이트
http://demun.tistory.com/2412
코드 넣는 법 정리
이외에도 많지만 :)
실 예제
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/monokai_sublime.min.css" rel="stylesheet"></link>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<br />
<div class="separator" style="clear: both; text-align: center;">
<pre><code>
#!/bin/env python
#-*- coding: utf-8 -*-
# platform 모듈은 파이썬 코드를 실행하고 있는 운영체제의 환경 정보를 알려줍니다.
# multiprocessing은 CPU의 개수를 알기 위해 사용합니다.
import platform
import multiprocessing
# print는 화면에 글자를 출력하라는 함수입니다.
print "운영체제: ", platform.system()
print "운영체제의 상세정보: ", platform.platform()
print "운영체제 버전: ", platform.version()
print "프로세서: ", platform.processor()
print "CPU 수: ", multiprocessing.cpu_count()
</code></pre>
