워드프레스에서 소스코드 하이라이트하기

블로그에서 소스 코드를 보여줄 일이 많은 것은 아닌데... 그렇지만 아주 가끔씩은 소스 코드를 보여주거나 커맨드라인 명령어를 보여줘야 하는 경우가 있다. 이 블로그 말고 화학정보학을 다루고 있는 Agile2robust 블로그에서는 코드를 보여줄 일이 좀더 많은 편이다. Agile2robust는 워드프레스가 아닌 텍스트큐브를 쓰고 있고, 여기에 적당한 플러그인이 없는 관계로, 약간의 노력을 들여서 Highlight.js라는 자바스크립트를 이용해서 코드 하이라이팅을 적용하는데 성공했다.

워드프레스에서는 이런 목적으로 다양한 플러그인이 존재하는데 나는 Highlight Source Pro라는 플러그인을 사용하고 있다. 이 플러그인은 코드 하이라이팅 자체는 GeSHi (General Syntax Highlighter)라는 잘 알려진 오픈 소스 프로그램을 이용하고 있다. 굉장히 다양한 종류의 문법을 지원하고 있으므로, 대부분의 필요에 잘 맞을 것이다.

이 플러그인을 설치하여 활성화한 후에, 코드 부분은 <pre lang='html'>과 같이 해당 언어의 이름이 들어간 pre 태그로 감싸주면 된다. 쉘에서 실행하는 명령어의 경우 bash로 지정을 해 주었는데, 그다지 마음에 들지는 않지만 lang 부분을 입력해 주지 않으면 css로 표시를 다르게 해 주지 않기 때문에 어쩔 수 없다.