티스토리에 프로그램 언어 등을 포스트 할때면, 위와 같은 syntax highlight 기능이 아쉬울때가 있다.
단순히 소스를 텍스트로 나열하는것 보단 훨씬 보기에도 쉽고 예쁘니깐 +_+!
그런 기능을 해주는 것이 바로 Syntax Highlighter 이다. 아래 그림을 클릭하여 싸이트로 가보자!
1. 위 싸이트에서 "download" 메뉴로 이동하여 파일을 다운받는다. [정식 파일 바로 다운받기]
2. 압축을 푼뒤, 폴더 중에 scripts와 styles 두개만 티스토리에 업로드 한다.
(나머지는 로컬 테스트용이므로 필요없다.)
- 폴더 설명 -
* scripts : 각종 언어별 브러쉬 (그야말로 각종 언어별로 다 있으니, 자주쓰거나 필요한 언어만 택하여 업뎃할수도 있다. * styles : 각종 테마별 스타일시트 (공식 홈피에 테마가 잘 정리되어 있다. 자기 맘에 드는걸로 쓰면 된다.)
3. 끝.
티스토리의 [스킨 html/css] 메뉴에서 skin.html을 다음과 같이 편집해준다. head 닫는태그</head> 위에 적어주면 된다.
<script type="text/javascript" src="./images/shCore.js"></script>
<!-- 자주 사용하는 언어 브러쉬들 선택 -->
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushCpp.js"></script>
<script type="text/javascript" src="./images/shBrushJava.js"></script>
<script type="text/javascript" src="./images/shBrushSql.js"></script>
<script type="text/javascript" src="./images/shBrushCSharp.js"></script>
<script type="text/javascript" src="./images/shBrushPhp.js"></script>
<link type="text/css" rel="stylesheet" href="./images/shCoreDefault.css"/>
<link type="text/css" rel="stylesheet" href="./images/shCoreDjango.css"/>
<script type="text/javascript">SyntaxHighlighter.all();</script>
1. 블로그 편집모드를 HTML로 바꾼다.
2. <pre class="brush: 사용할 언어 브러쉬명"> 넣을 코드 </pre> 와 같이 작성한다.
3. 끗.
* 언어 브러쉬 이름표 (Brush aliases)*
마지막으로, 제가 직접 수정한 테마 올립니다.
최신버전에서 없어진, 라인별로 색상주기를 추가했고, 테두리에 살~짝 변화를 주었습니다.
색상을 직접 선택할수 있도록 주석을 달아두었습니다. 입맛에 맞게 수정해서 쓰세요~
블로그 html/css 수정에서 테마파일명 부분에 제가 올린 테마파일명으로 교체후 사용하시면 적용 됩니다.
도움이 되었으면 좋겠습니다. ^-^ 의문사항은 댓글 주세요.
그냥 가기 허전하시면, 손가락 꾸욱 한번 해주셔도 돼요 +_+ㅋ
shCoreRowByRow.css