2014년 4월 29일 화요일

블로그 스팟에 SyntaxHighlighter 적용하기


소스 코드를 보기 좋게 하기위해 SyntaxHighlighter를 설치해 보겠습니다.


1. 구글 블로그 템플릿 수정


템플릿 -> HTML 편집 버튼을 눌러 코드를 수정하겠습니다.

와 head 와 head 사이에 위와 같이 script를 추가해 줍니다.

타 블로그의 경우에는 Syntax Highlighter을 적용하기 위해서 파일을 업로드 해야 하지만

구글 블로그의 경우에는 파일 업로드가 제한적이기 때문에 링크로 대체하였습니다.

저는 제가 사용 할 것 같은 brush 파일과 테마 파일만 링크로 연결했습니다.


그리고 body 부분을 찾아 아래 코드를 입력해 줍니다.

위 코드는 textarea를 사용해서 코드를 입력하기 위한 방법입니다.

코드를 입력할 때는 pre 태그와 textarea 태그를 사용 할 수 있는데요.

pre 태그를 사용 할 경우 꺽쇠( <, > ) 사용 시 코드가 깨지는 현상이 발생합니다.


3. 코드 입력 방법 알아보기

마지막으로 포스팅을 할 때 textarea 태그를 사용해서 코드를 입력하는 방법을 알아보겠습니다.

글쓰기 모드에서 좌측 상단의 HTML 버튼을 누르면 HTML편집창으로 변환됩니다.

여기에 아래와 같은 방법으로 코드를 입력 시킬 수 있습니다.

태그가 중복으로 사용이 안되 꺽쇠를 하나씩 빼고 적었습니다. ㅠㅠ

사용 가능한 언어는 아래 이미지를 참고 하시면 됩니다.


Post List