2017년 6월 7일 수요일

[프로그래밍] 코드 하이라이트

프로그래밍 코드를 웹에 올리다 보면, Plain Text로는 무슨 말인지 알수가 없는 경우가 많다.
그래서 하이라이트를 해주기 위해서 여러 사이트들의 도움을 받는데, 그 중에 이 블로그에서는 highlight.js를 사용해서 구현했다.

크게 그 이유를 보면...가볍고 빠르고..가장 중요한 것은 내가 가장 좋아하는 sublime text 포맷이 있다는 것이다. 물론 GitHub 포맷도 있다. 그리고 CDN 베이스로 converting을 하지 않아도 그냥 쓸수 있다는 점이다.

물론 라인 수를 안 보여주는게 좀 마음에는 안 들지만..세상에 어찌 다 맘에 드는게 있으리오.


비교 

http://softwaremaniacs.org/blog/2011/05/22/highlighters-comparison/


highlight.jsSyntaxHighlighterSHJSGoogle Code Prettify
User markup in code snippetsyesno 1)yesyes
Line numbersnoyesnoyes
Striped backgroundnoyesnoyes
Replacing indenting TABs with spacesyesyesnono
Language detectionyesnonoyes 2)
Multi-language codeyesyes 3)noyes
Arbitrary HTML container for codeyesnonono
HTML5 compatibility 4)yesnonono


사용법

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>

0 개의 댓글:

댓글 쓰기

 
Copyright © . 쿠버네티스 전문가 블로그 - Posts · Comments
Theme Template by BTDesigner · Powered by Blogger