블로그를 작성하다보면 소스를 올려야 할 때가 있다.
"여기서 여기까지가 소스이고 몇번째 줄이 중요하다" 이런 내용을 작성하고 싶어도 그냥 블로그에 올라가버린 소스로는 도저히 그런 표현을 쓰기가 참 애매하다.
그럴때 필요한 도구가 코드 하이라이터라고 불리는 애들이다.
그 중 가장 유명해서 많이 보았을 것이 바로 SyntaxHighlighter .
설치 방법 및 사용법은 간단하다.
원소스 : http://alexgorbatchev.com/SyntaxHighlighter/
syntaxhighlighter_3.0.83.zip첨부된 압축 파일을 다운받아서 티스토리의 HTML/CSS 수정의 업로드로 올린다.
압축파일에는 위와 같은 파일들이 들어 있다. 모두 다 올려도 되고, 본인에게 필요한 것만 올려도 된다.
귀찮으니까 다 올리자. 그래봐야 전부 다 합쳐도 196KB밖에 안된다.
위와 같이 싸그리 한번에 올릴 수 있다.
다음의 코드를 HTML/CSS에서 skin.html 의 <head></head>사이에 삽입한다.
head.txt----------------------------------------------------------------------------------------------------
<LINK rel=stylesheet type=text/css href="./images/shCoreDefault.css">
<LINK rel=stylesheet type=text/css href="./images/shCore.css">
<!-- 코드 하이라이트 스크립트 -->
<SCRIPT type=text/javascript src="./images/shCore.js"></SCRIPT>
<SCRIPT type=text/javascript src="./images/shLegacy.js"></SCRIPT>
<SCRIPT type=text/javascript src="./images/shBrushAS3.js"></SCRIPT>
<SCRIPT type=text/javascript src="./images/shBrushBash.js"></SCRIPT>
<SCRIPT type=text/javascript src="./images/shBrushCSharp.js"></SCRIPT>
<SCRIPT type=text/javascript src="./images/shBrushCpp.js"></SCRIPT>
<SCRIPT type=text/javascript src="./images/shBrushCss.js"></SCRIPT>
<SCRIPT type=text/javascript src="./images/shBrushJava.js"></SCRIPT>
<SCRIPT type=text/javascript src="./images/shBrushJavaFx.js"></SCRIPT>
<SCRIPT type=text/javascript src="./images/shBrushJScript.js"></SCRIPT>
<SCRIPT type=text/javascript src="./images/shBrushPhp.js"></SCRIPT>
<SCRIPT type=text/javascript src="./images/shBrushSql.js"></SCRIPT>
<SCRIPT type=text/javascript src="./images/shBrushVb.js"></SCRIPT>
<SCRIPT type=text/javascript src="./images/shBrushXml.js"></SCRIPT>
<SCRIPT type=text/javascript src="./images/syntHL.js"></SCRIPT>
------------------------------------------------------------------------------------------------------
그리고 설정된 skin.html을 저장하면. 끝. 설치는 끝!!
간단한 사용법은 아래와 같다.
소스가 들어 있는 포스팅 작성시 html편집에서 다음과 같이 영역을 지정해주면 된다.
<pre class="brush:언어코드">
소스
</pre>
글이 작성되고 나면 다음과 같이 라인번호와 소스에 칼라까지 입혀져서 보기 좋게 보여준다.
만일 소스가 전체 소스가 아니라 전체의 일부일 경우 특정 라인임을 강조해주고 싶을 때는
<pre class="brush:js; first-line:11;">
소스
</pre>
각 사용 언어별 brush명과 js파일명은 다음과 같다.
죽어도 안 쓸거 같은 js라면 찾아서 올리지 않아도 되겠지만...그거 찾는 것이 더 귀찮을 듯 하다.
세상 살다 보면 무슨 일이 생길지도 모르는데~
Brush name | Brush aliases | File name |
as3, actionscript3 | shBrushAS3.js | |
bash, shell | shBrushBash.js | |
cf, coldfusion | shBrushColdFusion.js | |
c-sharp, csharp | shBrushCSharp.js | |
cpp, c | shBrushCpp.js | |
css | shBrushCss.js | |
delphi, pas, pascal | shBrushDelphi.js | |
diff, patch | shBrushDiff.js | |
erl, erlang | shBrushErlang.js | |
groovy | shBrushGroovy.js | |
js, jscript, javascript | shBrushJScript.js | |
java | shBrushJava.js | |
jfx, javafx | shBrushJavaFX.js | |
perl, pl | shBrushPerl.js | |
php | shBrushPhp.js | |
plain, text | shBrushPlain.js | |
ps, powershell | shBrushPowerShell.js | |
py, python | shBrushPython.js | |
rails, ror, ruby | shBrushRuby.js | |
scala | shBrushScala.js | |
sql | shBrushSql.js | |
vb, vbnet | shBrushVb.js | |
xml, xhtml, xslt, html, xhtml | shBrushXml.js |
'etc > 기타' 카테고리의 다른 글
| 인사동 골목에서 맥도널드 찾는 외국인 미아만든 썰. (0) | 2015.07.02 |
|---|---|
| 블로그 방문자 유입URL을 보다가...가가라이브 채팅하게 된 썰 (0) | 2015.07.01 |
| 롯데칠성 쌕쌕 아직도 나오고 있었구나~ (2) | 2015.05.27 |
| 자지도 만지면 커지리...??? 네비게이션 직원의 섹드립 (0) | 2015.05.20 |
| 5월1일~5월14일 저품질 블로그 검색어 유입량[구글 아날리틱스] (0) | 2015.05.15 |
