Blogger에 syntax highlighting 추가하기

참 이놈의 blogger는 기능이 없어도 너무 없다 ㅡㅡ;
원래 prettify.js를 template에 삽입하면 바로 나와야 하는데, dynamic view를 선택하는 경우 결과가 제대로 나오지 않는다.
따라서 dynamic view에서는 매번 다음과 같은 코드를 HTML mode에서 삽입해 주어야 한다.

<script> 
(function() {
    /* dynamically load prettify.js */
    try {
        prettyPrint();
    } catch (e) {
        var prettifyScriptId = "prettifyScript";
        if (document.getElementById(prettifyScriptId) == null) {
            var scriptElement = document.createElement("script");
            scriptElement.id = prettifyScriptId;
            scriptElement.src = "https://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js";
            scriptElement.onload = function () { prettyPrint(); }
            document.getElementsByTagName("head")[0].appendChild(scriptElement);
        }
    }

    /* dynamically load sunburst.css */
    var prettifyStyleId = "prettifyStyle";
    if (document.getElementById(prettifyStyleId) == null) {
        var linkElement = document.createElement("link");
        linkElement.id = prettifyStyleId;
        linkElement.rel = "stylesheet";
        linkElement.type = "text/css";
        linkElement.href = "http://google-code-prettify.googlecode.com/svn/trunk/styles/sunburst.css";
        document.getElementsByTagName("head")[0].appendChild(linkElement);
    }
})();
</script>

출처: http://www.alexconrad.org/2011/12/highlight-code-with-bloggers-dynamic.html

댓글