thinksquare :: 모바일? 웹? 디자인?: 택스트큐브에서도 Syntax Highlighter를 쓰자!

2009년 5월 16일 토요일

택스트큐브에서도 Syntax Highlighter를 쓰자!

Tistory에서 Textcube로 이사를 오고나서 가장 먼저 한 게 Syntax Highlighter를 적용하는 것이었는데요... Tistory에서 하던 데로 하니 바로 되지는 않더군요ㅋ
몇 가지 꼼수를 써야 Textcube에서도 Syntax Highlighter를 사용할 수 있습니다.

먼저, 스킨편집으로 갑니다.
skin.html에 아래 태그를 추가해줍니다. 여기서 주의할 점은 <body>태그가 없으면 스킨 적용이 안되므로 <body> 태그는 중복해서 사용해주어야 합니다. (택큐에서 스킨을 적용할 때 "<body>"가 존재하는 지 확인합니다.)

<body>

<body onload="dp.SyntaxHighlighter.HighlightAll('code');">

<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shCore.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shLegacy.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushBash.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCpp.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushDelphi.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushDiff.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushGroovy.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJava.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPython.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushRuby.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushScala.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushSql.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushVb.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.0.320/styles/shCore.css">
<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.0.320/styles/shThemeDefault.css">
<script type="text/javascript">
SyntaxHighlighter.all();
</script>

오른쪽 위에 있는 버튼 중에서 가장 왼쪽의 버튼을 누르시고 Plain Text를 복사해서 쓰세요!

Syntax Highlighter를 다운받고 안에 있는 파일들을 업로드해서 사용하는 게 좋을텐데... 택큐에서는 js파일이 업로드가 안되는 관계로, 그냥 Syntax Highlighter 공식 사이트에서 js와 css파일을 가지고 오는 방법을 택하였습니다. 개인적으로 사용하고 있는 웹서버가 있으면 거기에 파일을 업로드하고 사용하시는 것도 좋은 방법일 거 같습니다.

댓글 없음:

댓글 쓰기

피드 구독하기: 댓글 (Atom)