블로그스팟에 소스코드 보기 좋게 삽입하는 방법
지금 쓰고 있는 구글 블로그스팟 테마 디자인에서 <pre><code> 태그를 이용한 소스코드 삽입 디자인 기능을 지원하지만 소스코드라는 것만 표시될 정도의 미약한 기능이기에 이 기능 대신 좀 더 보기 좋게 삽입하는 게 필요했습니다.
highlight.js 같은 별도의 자바스크립트 라이브러리를 이용할 수도 있지만 많이 쓰지 않는데 js파일을 하나 선언해야 한다는 점이 별로 마음에 들지 않아서 선언 없이 코드만 삽입할 수 있는 기능을 찾아봤습니다.
 |
<code>를 삽입하면 나오는 모습. 컬러가 없습니다. |
colorscripter.com
처음은 colorscripter 사이트를 이용 해 삽입용 소스코드를 만들어 봤습니다. 만드는 건 간단하고 어렵지 않은데 단점이 블로그 삽입용 소스코드 길이가 너무 길어지고 <code> 태그를 사용하는 방식이 아닌 <div> 태그를 사용해 만들기 때문에 검색엔진 노출이 되지 않습니다.
 |
colorscripter 에서 코드를 입력하고 HTML로 복사를 누르면 |
 |
이렇게 삽입용 소스코드를 생성해 줍니다 |
 |
블로그 스팟에 넣어봄 모습. 지나치게 방대하고 <code> 태그가 없습니다. |
hilite.me
colorscripter의 문제점 때문에 대안으로 찾아본게 hilite.me 라는 사이트입니다. 마찬가지로 소스코드를 삽입하고 Highlight 버튼을 누르면 미리보기 화면과 HTML 코드를 만들어줍니다. colorscripter에 비해 코드가 짦고 간결하고 <code> 태그를 사용해 보여주는 장점이 있습니다.
 |
hilite.me 사이트의 화면. 미리보기도 보여줍니다 |
 |
블로그스팟에 적용해보니 비교적 간결합니다 |
 |
블로그 테마때문에 미리보기 처럼은 안나오지만 이정도면 쓸만 하네요 |
결론은 hilite.me
둘 다 블로그스팟에 적용해 본 결과로 hilite.me를 사용하기로 했습니다. 별도로 구입한 블로그스팟 테마로 인해 사이트에서 보여주는 미리보기 화면처럼 적용은 안되지만 커스텀 하기 편하고 <code> 같은 근본적인 부분 때문에 이걸 쓰는게 맞는 것 같네요.