티스토리 블로그에 SyntaxHighlighter 사용하기

BS가 파란에 블로그를 만들었다가 방치해 두었는데…
파란닷컴이 서비스를 종료하면서 블로그 개설자에게 티스토리 초대장을 주네요.

그래서 티스토리로 옮겨볼까 하는데…

이런 저런 포맷터나 플러그인이 좀 다르네요.

그중 하나인 Syntax Highlighter 를 설정하는 방법을 알아보겠습니다.

1. SyntaxHighlighter 받기
SyntaxHighlighter 에서 받으시면 됩니다.

2. 압축 풀기

3. 티스토리 관리 페이지 이동
관리 페이지 > 꾸미기 > HTML/CSS 편집 > 파일업로드 로 이동합니다.

4. 압축 풀어 둔 것에서 scripts, styles 두 디렉토리의 모든 파일을 업로드 합니다.

5. HTML/CSS 편집 창으로 이동

6. skin.html 아래에 다음의 내용을 입력합니다.

<script type=”text/javascript” src=”./images/shCore.js”></script>
<script type=”text/javascript” src=”./images/shAutoloader.js”></script>
<script type=”text/javascript” src=”./images/shBrushAppleScript.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/shBrushColdFusion.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/shBrushErlang.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/shBrushJavaFX.js”></script>
<script type=”text/javascript” src=”./images/shBrushJScript.js”></script>
<script type=”text/javascript” src=”./images/shBrushPerl.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/shBrushPowerShell.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/shBrushSass.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” src=”./images/shLegacy.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”>
//<![CDATA[
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
//]]>
</script>

7. 환경 설정하기
SyntaxHighlighter 설정 설명 을 참고하여 위 붙여넣은 내용 중에서 가장 아래 부분의 자바 스크립트 부분을 수정합니다.

8. 테마 설정하기
테마는 shThemeDefault.css 대신 다른 테마 css 를 입력하면 됩니다.

9. 사용하기
글 작성시 HTML 편집모드에서 아래와 같이 입력합니다.

<pre class=”brush:cpp”>
int main(void)
{
if (1 < 0)
f();
return 0;
}
</pre>

그런데 이렇게 입력하면 <, > 와 같은 기호때문에 escape 처리를 해야 됩니다. 그래서 이렇게 하면 귀찮기는 하지만 해결됩니다.
(대신 모바일에서는 보이지 않습니다.)
<script type=”syntaxhighlighter” class=”brush:cpp”><![CDATA[
int main(void)
{
if (1 < 0)
f();
return 0;
}
]]></script>

추가사항)
소스가 너무 길어서 보기 불편하다면 티스토리의 접기 기능으로 접을 수도 있습니다.

<script type=”syntaxhighlighter” class=”brush:cpp”><![CDATA[

int main(void)

{

if (1 < 0)

f();

return 0;

}

]]></script>

 

QuickHighlighter – 블로그에 소스코드 삽입시에 편리한 도구

BS는 블로그에 소스코드 넣을 때에 SyntaxHighlighter를 사용하는데요…
예쁘기는 하지만 속도가 느리고 용량도 크고 설치도 해야되는 단점이 있습니다.
그럴 경우 대신할 수 있는 도구롤 소개합니다.


Quick Highlighter


간단한 소스 코드를 가지고 비교해 보겠습니다.


1. SyntaxHighlighter
태그를 <pre>로 하면 소스에 <나 >가 들어가면 쓸데없는 태그가 출력되네요…
(이건 SyntaxHighlighter의 버그가 아니라 블로그 에디터의 버그입니다.)
아래는 <script type=”syntaxhighlighter” class=brush:cpp><![CDATA[ … ]]></script>로 한 것입니다.

// 이것은 테스트 코드입니다.
#include <iostream>

int main(void)
{
	using namespace std;
	cout << "Hello" << endl;
	return 0;
}

2. QuickHighlighter
옵션은 Normal Line Numbers + Wrap overflowing text + 4 Tab Width + Combine Style and HTML Code + Highlight inbuilt keywords… 입니다.
Style과 HTML코드는 글에 하이라이팅이 여러 개이면 분리하고, 하나이면 묶는 것이 좋습니다.
한글이 아주 보기좋게 깨져서 나옵니다.





  1. // &#51060;&#44163;&#51008; &#53580;&#49828;&#53944; &#53076;&#46300;&#51077;&#45768;&#45796;.


  2. #include <iostream>


  3.  


  4. int main(void)


  5. {


  6.     using namespace std;


  7.     cout << “Hello” << endl;


  8.     return 0;


  9. }

3. 수정한 QuickHighlighter
수정한 내용은 “&amp;“를 “&“로 변경하고
‘Courier New’, Courier, “, “130% “, “vertical-align:top;“, “normal normal monospace; “, “normal normal 1em/1.2em monospace; ” 를 삭제하였습니다.





  1. // 이것은 테스트 코드입니다.


  2. #include <iostream>


  3.  


  4. int main(void)


  5. {


  6.     using namespace std;


  7.     cout << “Hello” << endl;


  8.     return 0;


  9. }