프로그래밍 코드를 블로그에 올릴 때 보기 좋게 하기

이렇게 읽기 쉽게 색깔이 입혀진다.

원래 설치하고 이런 것도 있지만 가장 간단한 방법으로 설명하겠음.

일단 대부분의 블로그는 HTML을 수정할 수 있다. 고급 기능으로 블로그 설정 이런데 가보면 항상 있으니깐 잘 찾아보도록.

이런 식으로 직접 편집가능하다.

찾았으면 이렇게 보여질 것이다. 거기서 </head> 부분을 찾아서 바로 위에 아래의 소스를 복사/붙여넣기 한다.

<!--SYNTAX HIGHLIGHTER BEGINS-->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css'rel='stylesheet' type='text/css'/>
<linkhref='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css'rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js'type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js'type='text/javascript'></script>
<scriptsrc='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js'type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js'type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js'type='text/javascript'></script>
<scriptsrc='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js'type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js'type='text/javascript'></script>
<scriptsrc='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js'type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js'type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js'type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js'type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js'type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js'type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf ='http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
<!--SYNTAX HIGHLIGHTER ENDS-->

그리고 미리보기 버튼을 먼저 눌러 이상하게 변한게 없는지 먼저 확인 후 적용을 한다.

이제 설치가 끝이났다. 이용을 하려면 이 두가지 방법중 편한거 하나를 선택해서 사용하면 된다.

<pre> 태그를 이용한 예제

위와 같은 방법으로 저 파란색으로 형광펜 그어져있는 사이에 원하는 소스를 넣으면 된다. 물론 HTML 편집 상태에서 넣어야 됨. 그리고 brush: 뒤에 원하는 언어를 써주면 된다.

그런데 HTML 코드를 넣고 싶어하는 blogger를 사용하는 블로그 유저들은 오류가 뜰 수 있으니 다음 방법을 추천한다고 되어있다.

바로 <script> 태그인데 예제는 다음과 같다.

<script type="syntaxhighlighter" class="brush:html"><![CDATA[
Your 'HTML' code goes here
]]></script>

만약 php를 수정한다면 이렇게 하면 된다.

<script type="syntaxhighlighter" class="brush:php"><![CDATA[
Your 'PHP' code goes here
]]></script>

출처로 가보면 기본 테마랑 설정도 바꾸는 방법 있으니까 하고 싶은 사람들은 연구해보도록.


출처: http://www.cyberack.com/2007/07/adding-syntax-highlighter-to-blogger.html