안녕하세요. 춘삼이의 블로그입니다.
저의 경우에는 IT정보 위주의 정보를 다루다 보니까 소스코드를 글에 넣는 경우가 있는데요. 사실 처음 블로그 시작할 때 몇몇 글들은 그냥 소스코드를 편집기 상에서 입력 후 올렸었는데 가독성도 떨어지고 별로 보기 좋지 않았어요. 그래서 프로그램 소스코드를 깔금하게 넣는 법을 알아보고자 해요.
소스코드를 블로그에 올릴 때 사용할 수 있는 방법으로 SyntaxHighlighter, Color Scripter 그리고 Google code prettify 이렇게 3가지 방법을 찾아봤는데요.(물론 이것 이외의 방법이나 개인적으로 개발해서 올려주시는 분들도 있습니다.) 일단 Syntax Highlighter의 경우에는 개발자가 더 이상 업데이트 하지 않는 것으로 보이고 사용 방법이 좀 복잡한 관계로 Color Scripter와 Google code prettify 두 가지를 살펴볼게요.
Color Scripter 사용하기
- 페이지 링크 : http://colorscripter.com/
사용방법은 아주 간단한데요. 위와 같이 Color Scripter 초기 접속 화면에서 웹 버전 사용하러 가기를 선택하시면 다음 화면처럼 바로 소스코드를 입력하는 창으로 이동합니다.
여기에서 상단의 언어, 스타일패키지, 배경, 세부설정 부분에서 본인이 입력할 언어와 원하는 스타일을 설정하신 후에 소스코드를 입력하고 하단부에 클립보드에 복사로 내용을 복사한 후에 블로그 글에 붙여넣기를 하면 되요. 아주 간단하죠!
- 세부설정에서 가로크기 제한을 해주시면 블로그 스킨에서 본문의 폭만큼 좌우폭을 설정할 수 있어요. 아래가 Code Scripter에서 클립보드 복사로 가져온 내용입니다.
1 2 3 4 5 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | cs |
- 블로그 글쓰기 만이 아니라 여러가지로 활용하고자 한다면 PC버전을 설치 후에 사용하셔도 되요.
Google code prettify 사용하기
- 페이지 링크 : https://code.google.com/p/google-code-prettify/
초기 페이지 접속 후에 좌측 GettingStarted 선택하시면 페이지가 이동 되는데요. 여기에 사용방법에 대한 설명이 있습니다.
- 일단 Google-code-prettify 적용을 위해서는 티스토리 html/css 편집으로 페이지에서 HTML의 <head> ~ </head> 사이에 아래 문장을 붙여넣어 주어야 합니다.
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=html&skin=sunburst"></script>
- 자세한 설정 변경이라든가 하는 부분은 해당 페이지 내용을 좀 더 살펴보시면 되구요. lang 다음 부분에 사용할 언어, skin 다음에 사용할 스킨 형태를 입력한다고 생각하면 됩니다. 현재 위의 내용은 언어로는 html, skin은 sunburst로 지정한 내용입니다.
- 그 후에 실제 사용시에는 <pre class=”prettyprint”> source code </pre> 형태로 입력해 주면 되는데요. Code Scripter와 똑같은 소스코드를 넣은 걸로 한 번 비교해 보죠.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Syntax Highlighter가 복잡하다고 제외했는데 실제 작업을 하다 보니까 google code prettify가 syntax highlighter와 거의 흡사하네요.
Google Code Prettify의 경우에는 Sunburst인데 제가 생각하던 태그 색상은 아니네요. 뭔가 설정이 잘못된 건지 아니면 html에 대한 설정이 원래 저런건지.
2가지 방법으로 블로그에 소스코드를 정리해서 올리는 방법을 살펴봤는데요. 간단하게 사용하고 싶으신 분들에게는 Code Scripter이 좀 더 나은 선택이라고 생각되네요.
'웹 서비스' 카테고리의 다른 글
| 블로그 초보의 빙글(Vingle) 사용기 (3) | 2015.10.19 |
|---|---|
| AddThis로 블로그의 다른 게시물 추천하기 - 이탈률을 낮춰보자 1 (0) | 2015.10.14 |
| 구글 애드센스 표시되는 광고를 변경하고 싶다면 - 광고 카테고리 설정 (0) | 2015.10.11 |
| 구글 애드센스 맞춤검색 엔진 티스토리 적용하기 (0) | 2015.10.05 |
| 구글 웹마스터 사이트맵 등록 (2) | 2015.09.20 |