구글 블로그(블로거)에서 프로그램 언어 코드 예쁘고 쉽게 넣는 방법 - 1

이전부터 구글 블로거에서 쓰고 있던 아름다운 표시 방법을 정리한다.

이것은 다른 블로그 사이트도 비슷하게 적용 가능하다.

이번 포스팅에서는 SyntaxHighlither를 이용, 글 쓸 때 아래처럼 HTML 편집을 선택하고

코드의 시작과 끝에 다음과 같이 선언만 해 주면 코드가 예쁘게 보이도록 할 것이다.

원하는 Javascript 코드

그런데 프로그래밍 언어 마다 예약어가 다르므로,
언어에 맞는 색깔을 칠하기 위해서는 해당 언어에 해당하는 Brush를 설정해 주어야 한다.

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

이 설정을 전역적으로 적용해 주기 위해서,
blogger.com 에 접속해서 테마 - HTML편집을 누르고
코드의 HEAD 부분에 Core css, Core js, 원하는 브러시의 js 파일을 지정 한다.

독자들을 위해 아래에 복붙 가능한 코드를 제공하도록 하겠다.
필자의 경우 Cpp, Java, JScript, Python, Bash, HTML 을 사용하므로 아래와 같이 설정했다.

그리고 본 예제는 DJango 테마를 선택했는데, 테마가 더 많이 존재한다.
따라서 이중에 블로그에 잘 맞는 테마를 선택해서 넣으면 된다.

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

또한 HTML 사용시 주의할 점이 있는데, <script ~~~ />로 된 단일 코드를 인식하지 못한다는 점이다.
따라서 <script> </script> 와 같이 꼭 닫는 코드를 넣어 주어야 한다.


속도를 좀 더 빠르게 하는 방법

ㆍ이렇게 전역으로 지정하지 않고, 글 마다 HTML 코드에 넣어주고 필요한 코드만 적용해 주면 속도가 더 빠르지만 매우 귀찮으며, 테마나 Syntax 툴을 바꾸려면 모든 글을 수정해야 하므로 엄청난 비효율이다.

ㆍ참고로 http://alexgorbatchev.com/pub/sh/current/ 같이 현재 최신 버전을 로딩 하게 해도 되는데, 결국 3_0_83 버전으로 리다이렉트 되면서 시간이 소요되므로 비추.

ㆍ코드를 Minify 해서 js 코드를 직접 형태로 넣어주면 파일 다운로드 횟수가 줄기 때문에 좀 더 빨라진다.


다음 회차에서는 수학 기호를 예쁘게 넣는 방법에 대해서 알아본다.