Tistory 블로그에 jQuery Syntax Highlighter 적용

jQuery Syntax Highlighter 홈페이지

http://balupton.com/projects/jquery-syntaxhighlighter

jQuery Syntax Highlighter Demo 페이지

http://balupton.github.com/jquery-syntaxhighlighter/demo/ 

jQuery Syntax Highlighter Usage

http://balupton.github.io/jquery-syntaxhighlighter/demo/

아래와 같이 써 주면 highlight 할 Code의 language를 자동으로 찾아준다.

<pre class="highlight">

</pre>

---

Google 에서 만든 Javascript code prettifier

https://code.google.com/archive/p/google-code-prettify/

stackoverflow.com 에서는 위의 Javascript code prettifier 를 사용한다.

[참고] http://stackoverflow.com/editing-help

---

jQuery Syntax Highlighter 를 Tistory 스킨에 적용하기.

스킨에서 사용하는 jQuery 버젼과 jQuery Syntax Highlighter 에서 사용하는 jQuery 버젼이 달라서 발생하는 에러 때문에 jQuery Migrate를 라이브러리를 사용해서 해결함.

스킨의 HTML 을 편집해서 HEAD 태그의 마지막 부분에 다음을 추가함.

* jquery-migrate-1.4.1.min.js 파일은 Tistory 블로그 스킨 편집창에서 파일 업로드 했음.

<script src="./images/jquery-migrate-1.4.1.min.js"></script>

<!-- Include jQuery Syntax Highlighter -->
<script type="text/javascript" src="http://balupton.github.com/jquery-syntaxhighlighter/scripts/jquery.syntaxhighlighter.min.js"></script>	
<!-- Initialise jQuery Syntax Highlighter -->
<script type="text/javascript">$.SyntaxHighlighter.init();</script>

jQuery Syntax Highlighter 에서 코드의 줄 사이 간격이 떨어져 보이는 현상은 Tistory 블로그 스킨의 CSS에서 다음 코드를 추가해서 해결함.

.area_view pre.highlight ol.linenums > li {
    margin-left: 0;
    margin-bottom: 0;
}

한 가지 주의해야 할 점은 모바일 웹 스킨을 사용 안함으로 해야한다는 점이다.

그러면 스킨의 반응형 웹 코딩 때문에 자동으로 모바일에 적용되어 보이는데, (jQuery Syntax Highlighter도 작동됨)

스킨 > 모바일웹 사용으로 셋팅하면, jQuery Syntax Highlighter가 적용 안되는 것 까지는 좋은데, 모바일 화면 벗어난 코드는 아예 잘려서 보이지 않는다. (좌우 스크롤바도 생기지 않음)

 [ 스킨 > 모바일 화면에서 모바일 웹을 ON으로 한 경우 ]

 [ 스킨 > 모바일 화면에서 모바일 웹을 OFF로 한 경우 ]