Blogger Customizing

구글 블로그 시스템을 사용하기로 하면서
기본 솔루션에서 지원하지 않는 몇가지 요구 기능을 처리하기 위해
찾아 적용한 커스터마이징 방법들을 정리해놓는다.

이런데에 큰 수고를 들이고 싶은 생각은 없으므로,
최대한 이미 구현되어있는 플러그인 또는 라이브러리를 이용하였다.

  • 태그별 포스팅 보기에서 글 제목만 표시
  • 코드 하일라이트
http://blog.cartercole.com/2009/10/awesome-syntax-highlighting-made-easy.html

위의 방법대로 적용하면, 아래처럼 프로그래밍 코드를 표시할 수 있다.

   
String str = "ok";
System.out.println( str );

syntax-highlighting 기본 패키지는 Objective-C 를 지원하지 않는데 아래 url에서 Objective-C 용 브러시를 받아 설치할 수 있다.

https://github.com/scottdensmore/ObjectiveCSyntaxHighlighter

jQuery 사용하여, 하이라이트 관련 스크립트 프로세스를 페이지 로딩 후에 처리하도록 하였다.
최종적으로 적용한 소스는 아래와 같다.

var shRoot = "http://agorbatchev.typepad.com/pub/sh/3_0_83/";
jQuery.getCSS = function( url, media ) {
 jQuery( document.createElement( "link" ) ).attr({
  href: url,
  media: media || "screen",
  type: "text/css",
  rel: "stylesheet"
 }).appendTo( "head" );
};
$( document ).ready( function(){

  if( $( "pre" ).length > 0 ){

 $.when(
  $.getCSS( shRoot + "styles/shCore.css" ),
  $.getCSS( shRoot + "styles/shThemeDefault.css" ),
  $.getScript( shRoot + "scripts/shCore.js" ),
  $.Deferred(function( deferred ){
   $( deferred.resolve );
  })
 ).done(function(){
  $.when(
   $.getScript( shRoot + "scripts/shBrushBash.js" ),
   $.getScript( shRoot + "scripts/shBrushCpp.js" ),
   $.getScript( shRoot + "scripts/shBrushCss.js" ),
   $.getScript( shRoot + "scripts/shBrushJava.js" ),
   $.getScript( shRoot + "scripts/shBrushJScript.js" ),
   $.getScript( shRoot + "scripts/shBrushSql.js" ),
   $.getScript( shRoot + "scripts/shBrushXml.js" ),
   $.getScript( shRoot + "scripts/shBrushObjC.js" ),
   $.Deferred(function( deferred ){
    $( deferred.resolve );
   })
  ).done(function(){
   SyntaxHighlighter.config.bloggerMode = true;
   SyntaxHighlighter.config.clipboardSwf = shRoot + "scripts/clipboard.swf";
   SyntaxHighlighter.defaults[ "toolbar" ] = false;
   SyntaxHighlighter.all();
  });
 });

  }

});

  • 폰트 설정
구글블로그 템플릿 한글 폰트 설정