Syntax Highlighter 설치 및 설정

Syntax Highlighter를 적용하면서 몇 가지 문제가 있었는데 참고삼아 정리한다.

설치

아래는 현재 이 블로그에 Syntax Highlighter를 설치하고 수정한 내용이다. 구글 blogger 뿐만 아니라 다른 블로그에도 아래 내용을 Copy & Paste로 HTML 페이지의 </head> tag 앞 줄에 붙여 넣기하면 Syntax Highlighter를 바로 사용할 수 있다.

일단, 사용하지 않는 Brush 파일들은 제거했다. 즉, bash, cpp, css, diff, js, java, text, python, sql, xml 등의 Brush 들만 사용할 수 있다. 그리고, Django 테마(shThemeDjango.css)를 약간 수정하여 사용하고 있으며, toolbar는 제거하였다.

<!-- Syntax Highlighter Additions START -->
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css" />
<!-- Themes: shThemeDefault.css, shThemeDjango.css, shThemeEclipse.css, shThemeMidnight.css, shThemeRDark.css -->
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDjango.css" rel="stylesheet" type="text/css" />

<style type="text/css">
.syntaxhighlighter a,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody,
.syntaxhighlighter table thead,
.syntaxhighlighter table caption,
.syntaxhighlighter textarea {
  font-size: 8pt !important;
}
.syntaxhighlighter {
  -webkit-text-size-adjust: none !important;
  padding: 1px !important;
}
</style>

<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js" type="text/javascript" />
<!-- Brushes: bash, cpp, css, diff, js, java, text, python, sql, xml -->
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.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/shBrushDiff.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/shBrushPlain.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/shBrushSql.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript" />
 
<script language="javascript" type="text/javascript">
  SyntaxHighlighter.config.bloggerMode = true;
  SyntaxHighlighter.defaults['toolbar'] = false;
  SyntaxHighlighter.all();
</script>
<!-- Syntax Highlighter Additions END -->

구글 Blogger에서의 제약사항

우선, 블로그에 올릴 새 글을 작성해서 publish하기 전에 preview 상태에서는 Syntax Highlighter가 적용되지 않는다. 내용을 수정하려면 일단 publish하고 나서 수정해야 한다.

또 한가지는, iPhone 등 mobile page view에서도 Syntax Highligter가 적용되지 않는다. 다만, Web 버전 보기(또는 PC 화면 보기)로는 제대로 볼 수 있다.

Firefox 브라우저에서 수직 scrollbar 나타나는 문제

위의 21행에서 padding 설정으로 해결.

Mobile 기기에서 line number와 code의 행 mismatch 문제

위의 17과 20행에서와 같이 font-size와  -webkit-text-size-adjust 설정으로 해결.