2016년 6월 5일 일요일

Blogger에 SyntaxHighligher 사용하기

Blogger를 사용해 보니.. 확장성은 좋은데..
여러 기능이 아직 부족한것 같다.

그중 가장 먼저 아쉬운 기능이 CodeBlock을 작성하는 기능인데..
찾아보니 SyntaxHighlighter를 사용하는 방법이 있었다.


SyntaxHighlighter
- 홈페이지: http://alexgorbatchev.com/SyntaxHighlighter/
자바 스크립트로 작성된 Syntax Highlighter..
라인 넘버도 나오고, 지원되는 언어도 상당히 많다.
(지원 언어: http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/)


!! 참고
아래 설명하는 방법은 Blogger의 "HTTPS 리디렉션" 설정이 켜져 있는 경우 동작하지 않음.
http://alexgorbatchev.com 에서 호스팅 하는 JS코드를 사용하는 방법으로, https로는 연결이 안됨.


설치 방법
직접 Javascript를 다운로드 받아서 사용하는 방법도 있지만,
Blogger에 업로드 하기 복잡하므로
위 사이트에서 hosting 해주는 Javascript를 사용 하는 방법을 정리 하겠다.
(참고: http://alexgorbatchev.com/SyntaxHighlighter/hosting.html)

1. 블로그 템플릿에 SyntaxHighlighter를 Load하는 코드 추가
1.1 "내 블로그" -> "템플릿" -> "HTML 편집"



1.2 </head> 바로 위에 아래 코드 추가 후, "템플릿 저장"


















Brush__.js 파일은 해당 언어를 Highlighting 하기 위한 파일로, 필요없는 언어는 제거 하는것도 좋다.

상세 설정 방법 참고:  http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/
Brush 목록: http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/


2. 코드를 포함한 게시물 작성
CodeHighlighting 을 적용하기 위한 템플릿은 아래와 같다.
#######YOUR CODE############

"brush:" 에는 CODE에 들어갈 언어 이름을 적어 주면 되고, 아래와 같은 목록을 지원한다.
Brush이름:
actionscript3
bash, shell
c-sharp, csharp
cpp, c
css   
delphi, pas, pascal
diff, patch
groovy
js, jscript, javascript
java
jfx, javafx
perl, pl
php
plain, text
ps, powershell
py, python
rails, ror, ruby
scala
sql
vb, vbnet
xml, xhtml, xslt, html, xhtml

2.1 작성 예
"글쓰기" -> "HTML" 모드로 전환 후, 코드 입력


결과



참고:
1. http://alexgorbatchev.com/SyntaxHighlighter/
2.  http://geektalkin.blogspot.kr/2009/11/embed-code-syntax-highlighting-in-blog.html