워드프레스에 코드를 입력하는 방법

자신의 블로그 글에 코드를 삽입하시는 분들이라면 코드 복사 기능이 있고 시각적으로도 분리되는 기능을 찾으십니다. 워드프레스 기본 기능으로 code 삽입이 있지만 기능적으로 많이 부족한 상황이죠. 오늘 글에서는 워드프레스에 코드를 입력하는 방법으로 Enlighter라는 플러그인에 대해서 설명해 보도록 하겠습니다. 글 말미에 Enlighter 테마 별 미리보기 예시가 있으니 꼭 살펴보시기 바랍니다.

Enlighter는 크게 다음의 세가지 장점이 있습니다.

하이라이트 기능이 있어 구문 성격에 따라서 색이 구분됩니다.
코드 행번호가 자동으로 삽입됩니다.
Copy to clipboard 기능을 사용할 수 있습니다.

워드프레스에 코드를 입력하기 위해서 많이 사용하는 플러그인 중 하나가 바로 Engliter입니다.

워드프레스 알림판에서 [플러그인] – [새로추가]로 이동한 뒤 검색창에 ‘enlighter’를 입력합니다. 검색 결과 중 화면과 동일한 플러그인을 [지금 설치]를 클릭한 뒤 [활성화]까지 마무리 해 줍니다.

글에서 Enlighter 사용해보기

설치를 완료하였으니 실제 글을 작성하면서 Enlighter 기능을 사용해 보도록 하겠습니다. 먼저 [글]-[새로추가]를 클릭하여 새로운 글쓰기 창을 띄웁니다.

글쓰기 창에서 블록 우측에 [+] 버튼을 클릭한 뒤 검색창에 ‘code’로 입력하면 기본으로 제공하는 코드 및 쇼트코드와 방금 저희가 설치한 Enlighter Sourcecode가 보입니다. 두 개를 각각 작성하여 어떤 모습으로 보여지는지 살펴보겠습니다.

기본 코드 기능으로는 코드 서체를 변경하는 것 외에는 특별히 수정할 수 있는 내용이 없습니다.

하지만 Enlighter의 경우 다음과 같이 소스코드의 언어를 설정할 수 있습니다. 언어를 설정하면 나중에 언어에 맞춰서 각기 다른 하이라이트 효과를 주게 됩니다.

미리보기를 통해 두 코드 입력결과를 비교해 보겠습니다.

두 개의 입력을 비교해 보았을 때 가장 두드러지는 차이점이 3가지 정도 있습니다.

하이라이트 기능이 있어 구문 성격에 따라서 색이 구분됩니다.
코드 행번호가 자동으로 삽입됩니다.
Copy to clipboard 기능을 사용할 수 있습니다.

Enlighter Appearance 비교

Enlighter를 이용해서 만든 코드 블럭이 약간은 밋밋한 느낌이 듭니다. Enlighter는 설정에서 다양한 테마를 사용할 수 있습니다. 한가지 아쉬운 점은 수많은 테마가 있지만 각각에 대한 미리보기를 제공하지 않는다는 점입니다. 이 글에서는 각 테마별로 보여지는 효과를 비교해 보도록 하겠습니다. 소스코드는 Javascript 언어를 사용하였습니다.