Blogger에 syntax highter 적용하기

/
0 Comments
Syntax highliter 는 다음과 같이 프로그래밍 코드를 폼나게 보여주는 역할을 한다.

#include<stdio.h>
int main(void)
{
    printf("Hello World!!\n");
    return 0;
}

이렇게 만들려면 약간의 작업이 필요하다.
먼저 blogger의 템플릿 메뉴에서 html 편집 버튼을 누른다. ctrl-f 를 눌러 </head>를 찾은 다음 다음의 코드를 </head> 바로 직전에 붙여 넣는다.

<script type='text/javascript'src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js'></script>
<script type='text/javascript'src='http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js'></script>
<link rel='stylesheet' type='text/css'
<link rel='stylesheet' type='text/css'
<script type='text/javascript'src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js'></script>
<script type='text/javascript'src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js'></script>
<script type='text/javascript'src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js'></script>
<script type='text/javascript'src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js'></script>
<script type='text/javascript'src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js'></script>
<script type='text/javascript'src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js'></script>
<script type='text/javascript'src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js'></script>
<script type='text/javascript'src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js'></script>
<script type='text/javascript'src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js'></script>
<script type='text/javascript'src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js'></script>
<script type='text/javascript'src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js'></script>
<script type='text/javascript'src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js'></script>
<script type='text/javascript'src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js'></script>
<script type='text/javascript'src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js'></script>
<script type='text/javascript'src='http://alexgorbatchev.com/pub/sh/current/scripts/shLegacy.js'></script>


그리고 다시 ctrl-f 를 이용하여 </body> 를 찾은 다음 다음의 코드를 </body> 바로 앞에 붙여 넣는다.

<script type='text/javascript'>
SyntaxHighlighter.all();
SyntaxHighlighter.config.stripBrs = true;
SyntaxHighlighter.config.bloggerMode = true;
</script>


이제 글을 작성할 때 다음과 같이 html 모드에서 <pre class="brush: 프로그래밍 언어 이름"> 코드 삽입 </pre> 로 코드를 삽입하면 된다. 이페이지의 맨 위에 있는 hello.c 를 삽입하려면

<pre class="brush: c">
#include &lt stdio.h &gt
int main(void)
{
    printf("Hello World!!\n");
    return 0;
}
</pre>

처럼 하면 된다. C언어에서 <stdio.h>를 마치 html 코드처럼 인식하는것 같다. 그래서 < 를 &lt (부등호 less than의 약자) 로 표현하고  > 를 &gt (부등호 greater than의 약자) 로 표현하면 제대로 된 코드를 얻을 수 있다.

지원하는 언어는 다음과 같다.  프로그래밍 언어 이름에 다음을 입력하면 된다.




댓글 없음:

JK-story. Powered by Blogger.