티스토리 뷰
http://alexgorbatchev.com/SyntaxHighlighter/
대체로 이 SyntaxHighlighter를 많이 사용합니다. xml, java 등 다양한 언어를 지원합니다.
우선 다운로드를 눌러 github 링크로 갑니다 https://github.com/syntaxhighlighter/syntaxhighlighter
github을 자주 사용하지 않는다면 Open in Desktop을 눌렀을 때 github 프로그램을 깔아야 하는 귀찮음이 있으므로
Clone or download > download ZIP을 눌러 다운로드 합니다.
압축을 풀면, 이런 폴더가 나오는데
shCore.js와 shCore.css 파일이 가장 기본 파일이고, shBrush~~ 파일은 모두 각 언어별 파일입니다. 자주 쓰는 언어 브러쉬만 설치해도 되지만 편의상 모두 설치해 봅니다.
※ 참고 - 언어별 파일
티스토리 관리자 페이지의 스킨편집 > 파일업로드에 scripts 폴더와 styles 폴더의 파일을 모두 업로드하고
Html 편집 탭으로 들어갑니다.
<head>와 </head> 사이에 다음 소스를 넣습니다.
css 파일은 link로, js 파일은 script 태그로 임베드 시킵니다. 마지막으로 SyntaxHighlighter를
<link type="text/css" rel="stylesheet" href="./images/shCore.css">
<link type="text/css" rel="stylesheet" href="./images/shThemeDefault.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/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>
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
이렇게 설정한 후엔 본문에 소스코드를 적고 html에서 pre 태그로 감싸면 됩니다.
<pre name="code" class="brush:java;"> 소스코드 </pre> 이런 식으로 말입니다.
brush:뒤엔 java 대신 해당 언어를 넣으면 됩니다.
그리고 옵션과 테마를 설정할 수 있는데,
먼저 Theme은 밝은 타입의 Default, Django, Eclipse와
어두운 타입의 Emacs, Fade To Grey, Midnight, RDark가 있습니다.
default
fade to gray
midnight
이며, http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/ 에서 미리볼 수 있습니다.
테마를 바꾸려면 <link type="text/css" rel="stylesheet" href="./images/shThemeDefault.css"> 이 부분의 파일명(shThemeDefault)을 바꿔줍니다.
나머지 옵션은 한줄 한줄에 쓰는 bloggerMode, strings, stripBrs, tagName 등이 있지만 잘 쓰지 않으니 생략하고,
디폴트로 설정된 옵션이 있습니다.
추천하는 옵션은 아래 두가지입니다.
SyntaxHighlighter.defaults["toolbar"] = false;
SyntaxHighlighter.defaults["auto-links"] = false;
이 코드 위에 쓰면 됩니다.
SyntaxHighlighter.all();
옵션 설명들입니다.
auto-links - true로 설정되어 있습니다. URL이 있으면 자동으로 하이퍼링크가 달리게 됩니다. 단순히 소스 코드를 적는다면 false로 해두는 게 좋습니다.
class-name - ''로 설정되어 있습니다. 사용자가 수동으로 class 이름을 추가할 수 있습니다.
collapse - false로 설정되어 있습니다. true로 할 경우 소스를 펼쳐볼 수 있습니다.
first-line - 1로 설정되어 있습니다. 시작 라인을 몇 번으로 할지 숫자로 지정 가능합니다. (10일 경우 숫자가 10부터 시작)
gutter - true로 설정되어 있습니다. false로 하면 라인 번호가 사라집니다.
hightlight - null로 설정되어 있습니다. 지정한 숫자의 줄에 하이라이트가 주어집니다.
html-script - false로 설정되어 있습니다. true일 경우 pre 태그 내부 html 태그가 모두 노출됩니다.
smart-tabs - true로 설정되어 있습니다. false일 경우 탭을 사용한 문자 사이 거리가 벌어집니다.
tab-size - 4로 설정되어 있습니다. 가로 탭 개수를 조절 가능합니다.
toolbar - true로 설정되어 있습니다. false일 경우 오른쪽 상단의 물음표 버튼이 사라집니다.
http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/