WordPress로 개발 관련 블로그를 운영하다보면 코드를 좀더 예쁘게 보이도록 하고싶은 생각이 든다. 다양한 Syntax Highlighter 플러그인이 있지만 그중에 만족스럽게 사용할 수 있는 것을 찾기는 상당히 힘들었다. 블로그 테마와 취향별로 원하는 것을 찾기엔 상당히 어려운 듯하다.
Highlight.js
Highlight.js는 최근에 발견하여 사용하고있는 Syntax Highlighter이다. 기존에 쓰던 Crayon Syntax Highlighter는 커스터마이징 하기가 어려웠던 것에 비해 Highlight.js는 pre 태그에 padding 설정을 하거나 배경 색을 원하는데로 바꾸기가 쉬워서 바로 적용하였다.
console.log('Hello, World!');pre 태그 안에 code 태그를 추가로 작성해주어야 적용이 되어서 기존에 쓰던 Crayon 보다 글 작성할 때 다소 귀찮음이 있지만 결과물이 맘에 든다. Crayon의 경우 pre 태그나 code 태그를 알아서 인식해서 적용되기 때문에 편리하긴 했는데, 라인수를 없애도 초기 로딩시에 라인이 보였다가 사라지고, 배경색, 패딩 설정 등이 까다로웠다. 그에 비해 highlight.js는 라인수 설정이 없고, css를 편집하기가 편리하다.
플러그인 설치를 하기위해서 위의 링크로 가서 다운받거나, WP Code Highlight.js을 플러그인에서 검색하여 설치하면 된다.
highlight.js에는 다양한 테마가 있는데, 위의 링크에서 원하는 스타일을 찾아서 설정에서 변경해주면 바로 적용된다.
Crayon Syntax Highlighter
Crayon의 경우는 스타일보다는 기능면에서 필요한 사항이 많으면 사용하면 될 듯 하다. 툴바 등이 지원되고 word-break를 하지 않고 스크롤로 볼 수 있게 되있어서 보기에 좀더 편리한 측면도 있다. highlight.js와 마찬가지로 다양한 스타일이 제공된다. 아래는 사용했을 때 보여지는 화면이다.
