Tuesday, July 7, 2015

kor> blog spot SyntaxHighligter 사용법

출처 : http://stackoverflow.com/questions/10335463/how-to-setup-syntax-highlighter-on-blogger

1) 설치법
1-1) 기존 블로거 template부터 백업.
대시보드 - 템플릿 - HTML 편집




1-2) </b:skin> 앞에, 다음 링크로부터 복사한 소스코드 붙여넣기.


1-3) 아래 코드를 </head> 앞에 붙여넣기
단, 원문과 달리 shTheme를 사용하기위해서 css 및 js 코드를 alexgorbatchev로 부터 가져왔다.  google 저장소에서는 style 디렉토리를 찾지 못했기 때문.
shThemeEmacs.css 대신 다른 테마를 찾아 취향대로 적용할 수 있다.


<!-- Syntax Highlighter Additions START -->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEmacs.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<!-- Syntax Highlighter Additions END -->

1-4)</body> 앞에 아래 소스코드 붙여넣기.

<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

1-5) 템플릿 저장

2) 사용법
 html 편집모드에서 아래와 같이 name="code" class=속성 을 지정하고 코드를 작성하면 된다. gutter:false는 줄번호 생략하는것을 뜻한다. &lt; 는 < 꺽쇠기호를 뜻하며, 꺽쇠기호를 치환하지 않고 입력한다면 이사람 과 같이 #include< 내용이 소스코드 마지막에 </ 로 반복 출력되는 에러, 버그를 겪을 것이다.

<pre name="code" class="brush:cpp gutter:false">
#include &lt;stdio.h>
void main(){
    printf("hello hell??\n");
}
</pre>
cpp
#include <stdio.h>
void main(){
    printf("hello hell??\n");
}
출력 결과

 단, 게시 후에만 SyntaxHighligter가 지원되며 미리보기 모드에서는 지원되지 않는다.

No comments:

Post a Comment