워드프레스 강좌 | Crayon Syntax Highlighter - 코드 문법 하이라이트 플러그인

Crayon Syntax Highlighter

프로그래밍을 주제로 하는 블로그나 사이트라면 수많은 코드를 글에 포함하게 됩니다.

코드는 <pre> 태그나 <code> 태그를 이용하여 고정폭 글꼴로 나타낼 수도 있으나, 단색으로 나타내므로 읽는게 불편합니다.

워드프레스에는 이런 불편을 해소해주는 Syntax Highlighter 플러그인이 많습니다. 그 중 사용하기 편하고 다양한 기능을 가진 플러그인이 Crayon Syntax Highlighter입니다.

사용법

플러그인을 설치하고 활성화하면 에디터에 <> 모양 아이콘이 생깁니다. 그 아이콘을 클릭하면 코드 입력 창이 생깁니다.

언어를 선택하고 코드를 입력한 후 [추가]를 클릭합니다.

글을 저장하면 다음처럼 줄번호와 함께 예쁘게 코드가 출력됩니다.

코드 위에 마우스를 올리면 복사 등의 작업을 할 수 있는 툴바가 나옵니다.

기본 설정만으로도 충분히 예쁘지만, 설정을 편집하여 원하는 모양으로 바꿀 수 있습니다.

테마가 수십개 있고, 글꼴, 크기, 줄간격, 툴바를 무조건 보이기, 줄바꿈 처리 등 다양한 옵션이 있습니다.

<pre> 태그에 class만 붙이는 형식이기에 플러그인을 비활성화해도 고정폭 글꼴로 표현된다는 것도 장점입니다.

HTML 코드가 깨진다면

Crayon Syntax Highlighter 플러그인 사용시, 기존에 <pre> 태그로 입력했던 HTML 코드가 깨지는 문제가 발생할 수 있습니다.

이 문제를 해결하려면 [설정 - Crayon]에서 [Decode HTML entities in code]에 체크하고 저장합니다.

그러면 다음처럼 잘 나옵니다.

요약글(Excerpt)에서는 적용되지 않게 하는 방법

첫화면, 검색 결과 등에 요약글이 나오게 할 수 있습니다. 이때 Crayon으로 만든 코드가 있다면 Crayon이 적용된 모양으로 나옵니다.

이를 해제하려면 기타 설정에서 [Remove Crayons from excerpts]에 체크하고 저장합니다.

그러면 요약글에서는 Crayon이 적용된 코드가 나오지 않습니다.

Created on 2015-02-14 05:35 | Updated on 2018-10-09 23:27