프로그래밍 언어를 보기 쉽게 도와주는 SyntaxHighlighter를 소개합니다!
공식 홈페이지: http://alexgorbatchev.com/SyntaxHighlighter/
이하는 샘플입니다.
여기를 누르면 데모 페이지로 이동합니다.
1. 다운로드
http://alexgorbatchev.com/SyntaxHighlighter/download/
위 링크로 들어가셔서, Click here to download 버튼을 클릭하시면 다운로드 됩니다.
2. 설치
압축을 해제한 후, styles 와 scripts 폴더 내 파일들을 티스토리 스킨에 업로드하세요.
3. html 수정
SyntaxHighlighter를 불러오기 위해 html을 조금 수정해줘야합니다.
위 스크린샷에서 HTML/CSS 버튼을 클릭하면 수정할 수 있습니다.
이하의 코드를 </head> 위에 붙여넣습니다.
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shLegacy.js"></script>
<script type="text/javascript" src="./images/shBrushBash.js"></script>
<script type="text/javascript" src="./images/shBrushCpp.js"></script>
<script type="text/javascript" src="./images/shBrushCSharp.js"></script>
<script type="text/javascript" src="./images/shBrushCss.js"></script>
<script type="text/javascript" src="./images/shBrushDelphi.js"></script>
<script type="text/javascript" src="./images/shBrushDiff.js"></script>
<script type="text/javascript" src="./images/shBrushGroovy.js"></script>
<script type="text/javascript" src="./images/shBrushJava.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/shBrushPlain.js"></script>
<script type="text/javascript" src="./images/shBrushPython.js"></script>
<script type="text/javascript" src="./images/shBrushRuby.js"></script>
<script type="text/javascript" src="./images/shBrushScala.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>
<link type="text/css" rel="stylesheet" href="./images/shCore.css">
<link type="text/css" rel="stylesheet" href="./images/shThemeDefault.css">
<script type="text/javascript">SyntaxHighlighter.all();</script>
이후 <body>를 이하의 코드로 변경합니다.
<textarea>태그를 사용하기 위함으로, <pre>태그를 사용하시려면 바꾸지 않아도 됩니다.
<body Onload="dp.SyntaxHighlighter.HighlightAll('code');">
4. 사용법
SyntaxHighlighter를 사용하는 방법은 <textarea>와 <pre> 2가지가 있습니다.
먼저, 태그를 사용하기 위해 글 작성 상단에 HTML 박스를 체크하여 html 작성 상태로 바꿉니다.
<textarea>은 아래의 형태로 작성합니다.
<textarea name="code" class="brush:cpp;">
… 소스 코드 …
</textarea>
cpp 대신 해당 언어에 맞는 브러쉬를 선택하면 됩니다. 브러쉬 목록은 아래 링크에서 참고하세요.
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
<pre>는 아래의 형태로 작성합니다.
참고로 <pre>는 html 코드와 중복되어 문제가 발생할 수 있다고 합니다.
<pre class="brush:java">
… 소스 코드 …
</pre>
5. 크기 조절
SyntaxHighlighter 폰트 크기를 조절하기 위해서
<head> 내에 아래 코드를 추가합니다.
<style type='text/css'>
.syntaxhighlighter table tbody
{
font-size: 14px !important;
}
</style>
px 대신 pt, em 등도 상관없습니다.