구글 블로거(블로그스팟)의 일반적인 템플릿에서 SyntaxHighlighter를 적용하는 방법에 대한 글은 많습니다. 하지만 동적 뷰 템플릿에서 정상 동작하는 방법은 찾기 힘들었습니다. 그래서 제가 찾은 방법 중 제일 괜찮은 방법을 소개해 드리겠습니다.
먼저, 블로거의 동적 뷰 템플릿을 선택합니다. 그리고 HTML 편집을 클릭하여 이동 합니다.
그리고 아래 코드를 head 태그 닫기 전에 입력하여 줍니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shCore.css' rel='stylesheet' type='text/css'/> <link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shCore.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCpp.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCSharp.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCss.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJava.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJScript.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPhp.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPython.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushRuby.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushSql.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushVb.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushXml.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPerl.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushBash.js' type='text/javascript'/> <script language='javascript' type='text/javascript'> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf'; SyntaxHighlighter.defaults['toolbar'] = false; SyntaxHighlighter.all(); </script> |
여기까지는 기존의 일반 템플릿과 별 차이가 없습니다.
하지만 여기서부터가 다릅니다. SyntaxHighlighter가 필요한 모든 글의 편집 마지막에 html 편집 방식으로 아래 코드를 붙여 넣으면 됩니다.
1 | <script type="text/javascript">SyntaxHighlighter.highlight();</script> |
이제 SyntaxHighlighter가 필요한 부분을 html 편집방식으로 pre 태그를 이용해 감싸 주시면 됩니다. 자세한 내용은 SyntaxHighlighter에서 확인 하실 수 있습니다.
참조: http://kevin-junghans.blogspot.kr/2013/01/adding-syntaxhighlighter-to-blogger.html
