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

Crayon Syntax Highlighter

프로그래밍을 주제로 하는 블로그나 사이트라면 수많은 코드를 글에 포함하게 됩니다. 코드는 <pre> 태그나 <code> 태그를 이용하여 고정폭 글꼴로 나타낼 수도 있으나, 단색으로 나타내므로 읽는게 불편합니다. 워드프레스에는 이런 불편을 해소해주는 Syntax Highlighter 플러그인이 많습니다. 그 중 사용하기 편하고 다양한 기능을 가진 플러그인이 Crayon Syntax Highlighter입니다.

Crayon Syntax Highlighter는 꽤 오랫동안 업데이트가 되지 않고 있어서 환경에 따라 제대로 작동하지 않을 수 있습니다. 대체할 수 있는 플러그인으로 Enlighter가 있습니다.

사용법

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

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

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

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

설정

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

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

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

HTML 코드가 깨진다면

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

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

같은 카테고리의 다른 글

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

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

Crayon Syntax Highlighter 프로그래밍을 주제로 하는 블로그나 사이트라면 수많은 코드를 글에 포함하게 됩니다. 코드는 <pre> 태그나 <code> 태그를 이용하여 고정폭 글꼴로 나타낼 수도 있으나, 단색으로 나타내므로 읽는게 불편합니다. 워드프레스에는 이런 불편을 해소해주는 Syntax Highlighter 플러그인이 많습니다. 그 중 사용하기 편하고 다양한 기능을 가진 플러그인이 Crayon Syntax Highlighter입니다. Crayon Syntax Highlighter는 꽤 오랫동안 업데이트가 되지 않고 있어서 ...

워드프레스 강좌 / 언어 변경하기

워드프레스 강좌 / 언어 변경하기

언어 변경 워드프레스를 특정 언어로 설치한 후에 다른 언어로 변경할 수 있습니다. 언어 변경에는 사이트 전체 언어 변경과 사용자별 언어 변경 두 가지가 있습니다. 사이트 전체 언어 변경 사이트 전체 언어 변경은 에서 합니다. 에서... 원하는 언어를 선택한 후... 을 클릭하면... 적용됩니다. 사용자별 언어 변경 사용자별로 다른 언어를 사용할 수 있습니다. 사용자의 프로필로 이동한 후 에서 ...

워드프레스 강좌 / 플러그인 / WP Mail SMTP / 메일 발신 서버 변경해주는 플러그인

워드프레스 강좌 / 플러그인 / WP Mail SMTP / 메일 발신 서버 변경해주는 플러그인

워드프레스에서 관리자에게 또는 사용자에게 메일을 보냅니다. 이때 별다른 설정이 없다면 PHP로 메일을 보냅니다. 그런데 PHP로 메일을 보내면 제대로 발송이 되지 않을 수도 있고, 받는 쪽에서 스팸으로 처리될 가능성이 높습니다. 이를 해결하는 방법은 지메일, 네이버 메일 같은 메일 서비스의 SMTP를 이용하는 것입니다. 그 설정을 도와주는 것이 워드프레스의 SMTP 플러그인이고, 가장 인기 있는 ...

워드프레스 강좌 / 자식 테마(Child Theme)의 뜻과 만드는 방법, 장단점

워드프레스 강좌 / 자식 테마(Child Theme)의 뜻과 만드는 방법, 장단점

자식 테마의 뜻 어떤 테마의 디자인과 기능을 그대로 상속 받는 테마를 자식 테마(Child Theme)라 합니다. 이때 상속해주는 테마를 부모 테마(Parent Theme)라 합니다. 자식 테마 만드는 방법 워드프레스의 기본 테마 중 하나인 Twenty Seventeen의 자식 테마를 만들어보겠습니다. 방법 1 wp-content/themes 폴더에 twentyseventeen-child 폴더를 만듭니다. (폴더 이름은 다른 것으로 해도 상관없습니다.) twentyseventeen-child 폴더 안에 다음의 내용을 가진 style.css ...

워드프레스 강좌 / 글 / 고전 편집기 / 화면 옵션

워드프레스 강좌 / 글 / 고전 편집기 / 화면 옵션

워드프레스 관리자 페이지의 메뉴는 왼쪽에 있습니다. 플러그인이나 테마를 설치하면 메뉴는 더 늘어납니다. 왼쪽의 메뉴를 클릭하면 오른쪽에 관련 내용이 나옵니다. 그런데 보여줄 수 있는 모든 내용이 다 나오지는 않습니다. 화면 크기가 한정되어 있다보니 자주 사용되거나 중요한 내용만 나오기도 합니다. 숨겨진 내용은 오른쪽 위의 에서 보이게 할 수 있습니다.(반대로 화면에 있는 내용을 숨길 ...

워드프레스 강좌 / 플러그인 / Pixabay Images / 무료 이미지 사이트 픽사베이 이미지를 바로 글에 넣을 수 있는 플러그인

워드프레스 강좌 / 플러그인 / Pixabay Images / 무료 이미지 사이트 픽사베이 이미지를 바로 글에 넣을 수 있는 플러그인

Pixabay 픽사베이(Pixabay)는 개인은 물론 상업적 용도로도 사용할 수 있는 이미지를 공유하는 사이트입니다.(대부분 CC0 Creative Commons이나, 간혹 상업적 이용이 곤란한 것도 있으니 다운로드 받기 전에 라이센스를 확인하는 것이 좋습니다.) 현재 백만 개가 넘는 사진, 일러스트, 벡터 이미지, 동영상이 있으며, 일정 수준의 품질을 만족해야 공유 가능하므로 좋은 자료가 많습니다. 한글로 번역이 잘 되어 있는 편이어서 한국 ...

워드프레스 강좌 / 플러그인 / Duplicate Menu / 메뉴 복사하는 플러그인

워드프레스 강좌 / 플러그인 / Duplicate Menu / 메뉴 복사하는 플러그인

워드프레스에서 메뉴를 만드는 게 그리 쉽지는 않습니다. 어렵다기 보다는 손이 많이 갑니다. 메뉴 아이템이 많으면 지루한 작업을 한참 해야 합니다. 메뉴 작업을 하다보면 비슷한 메뉴를 여러 개 만들어야 하는 경우도 있고, 긴 메뉴를 분할해야 하는 경우도 있습니다. 그 때마다 메뉴를 새로 만드는 건 너무 번거롭습니다. Duplicate Menu는 이러한 작업을 도와주는 플러그인입니다. 이름 ...

워드프레스 / 메모

위젯 제목 출력되지 않게 하는 방법 위젯의 내용은 출력하지만, 위젯 제목은 출력하고 싶지 않다면, functions.php에 다음 코드를 추가한다. function no_widget_title( $t ) { return null; } add_filter( 'widget_title', 'no_widget_title' ); 이메일 주소 변경 알림 메일 가지 않게 하는 방법 functions.php에 다음 코드를 추가한다. add_filter( 'send_email_change_email', '__return_false' ); 메타 태그 추가하는 방법 자식 테마를 만들어서 사용하고 있다면, 메타 태그 ...

워드프레스 강좌 / 플러그인 / DW Question & Answer / 질문과 답변 게시판 플러그인

워드프레스 강좌 / 플러그인 / DW Question & Answer / 질문과 답변 게시판 플러그인

게시판 형식은 여러 가지가 있습니다. 그 중 하나가 Q&A 형식의 게시판입니다. 질문을 남기면 답변을 달고, 질문자는 여러 답변에서 원다는 답을 채택하는 시스템입니다. Stack Overflow, 네이버 지식인과 비슷하다고 할 수 있습니다. 워드프레스에도 그런 형식의 게시판을 만들 수 있는 플러그인들이 있습니다. 그 중 하나가 DW Question & Answer입니다. 설치하고 사용하는 방법을 알아보겠습니다. 설치와 설정 워드프레스 ...

워드프레스 강좌 / 특성 이미지 설정하는 방법

워드프레스 강좌 / 특성 이미지 설정하는 방법

특성 이미지 워드프레스의 글이나 페이지에는 특성 이미지를 설정하는 옵션이 있습니다. 특성 이미지는 해당 글을 대표하는 이미지로, 글의 내용을 잘 반영하는 이미지로 설정합니다. 특성 이미지는 본문에 삽입되는 것은 아니지만, 테마나 플러그인에서 여러 가지 방식으로 활용하니, 가능하다면 설정하는 것이 좋습니다. 특성 이미지 설정하기 글이나 페이지를 작성하는 화면에 특성 이미지를 설정하는 옵션이 있습니다. 을 클릭합니다. 기존 ...