구글 블로그(blogger.com) 코드 강조(SyntaxHightlighter)

블로그에 프로그래밍 관련된 여러가지 코드를 올릴때 보기 좋게 꾸며주는 것들이 있다.

이런 것들을 적용할려면 스킨 또는 템플릿의 html 편집이 가능해야 한다.

구글 블로그도 가능하기는 한데 해당하는 js 파일을 올리는 기능이 없다.

그렇다면? CDN 에서 제공하는 것을 이용하면 된다.

jQuery 및 javascript 외부에서 추가하는 여러가지 방법

위글에서 3번째 cdnjs 에서 SyntaxHighlighter를 호스팅하고 있다.

이것을 이용하여 구글 블로그에 코드 구문 강조 기능을 넣으면 된다.

1. 블로그 설정에서 템플릿 --> HTML 편집을 선택하여 들어간다.

2. html 코드가 나오는데 </head> 부분을 찾는다.

3. 그 위에 다음과 같은 코드를 넣어야 합니다.

4. 위 설정을 완료했으면 저장을 하면 됩니다.

코드 구문 강조를 사용하는 방법은 글을 작성하고 html 편집 모드로 들어가

// 요기에 코드를 넣으면 됩니다.

// brush 뒤에 cpp라고 적혀 있는데 이것은 shBrushCpp.min.js를 링크했기 때문에 됩니다.
// 다른 것을 사용하고자 한다면 해당하는 파일들을 링크해야 됩니다.
// ex) html 은 shBrushXml.js, python 은 shBrushPython.js
// 3번 항목에 
// 라고 넣어주어야 됩니다.

의 형태로 넣어주면 됩니다.

테마는 다음 링크에서 확인이 가능합니다.

http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/

구문의 언어에 대한 것은

http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/ 에 있으니 원하는 파일들을 위쪽에 있는 형식으로 작성해서 넣어주면 됩니다.

그외 설정에 관한 것들은 http://alexgorbatchev.com/ 를 참고하시기 바랍니다.

그럼 조금이라도 더 나은 구글 블로그 생활이 되기를 바랍니다.