[Web] Tistory에 Syntax 적용하기

여러가지 작업한 내용을 기억하기 위한 수단으로 블로그를 하다보니 가끔 코드 적을 일이 있었는데 이런 좋은 소스가 있는 것을 보고 적용해보았다.

1. SyntaxHighlighter 3.0.83 적용하기

SyntaxHighlighter 3.0.83 다운로드


1) 다운로드한 압축파일을 풀어서 scripts, styles 폴더의 모든 파일을 티스토리에 업로드한다.
2) skin.html에서 </head> 바로 위에 아래의 내용을 삽입한다.

<script type="text/javascript" src="./images/shCore.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>

<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>

3) 글을 작성한다. syntax를 적용하기 위해서는 HTML을 클릭하여 아래처럼 입력하면 된다.

<pre class="brush:원하는브러쉬">
코드 입력
</pre>

참고
1. http://demun.tistory.com/1785 

2. Copy & Paste로 쉽게 적용하기

위 방법은 스킨을 변경할 경우에 다시 적용해야 하고, 코드를 넣을 때마다 원하는 브러쉬를 매번 선택해야하는 불편이 있다. 아래의 방법을 사용하면 매우 쉽다.

1) Mac OS X + Xcode + Safari 브라우저를 조합하면 간단히 Copy & Paste로 Syntax가 적용된 코드를 넣을 수 있다.