워드프레스 강좌 / 플러그인 / 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]에 체크하고 저장합니다.

같은 카테고리의 다른 글
워드프레스 강좌 / Compress JPEG & PNG images / 이미지 압축 플러그인

워드프레스 강좌 / Compress JPEG & PNG images / 이미지 압축 플러그인

워드프레스에 이미지를 업로드하면, 여러 가지 크기의 썸네일이 만들어져서 디스크를 많이 사용하게 됩니다. 따라서 디스크 사용량을 줄이고 싶을 때 제일 먼저 하는 것이 이미지 압축입니다. 이미지를 압축하는 방법은 여러 가지가 있는데, 그 중 하나가 플러그인을 이용하는 것입니다. Compress JPEG & PNG images는 이미지 압축을 도와주는 플러그인입니다. Smush와는 다르게 원본 이미지 압축도 가능합니다.(Smush도 유료는 원본 ...

워드프레스 강좌 / 플러그인 / Contact Form 7 / 폼메일 만드는 플러그인

워드프레스 강좌 / 플러그인 / Contact Form 7 / 폼메일 만드는 플러그인

Contact Form 7 Contact Form 7은 폼메일 플러그인입니다. 정보를 입력할 수 있는 폼을 쉽게 만들 수 있습니다. 스팸 방지 도구인 reCAPTCHA를 사용할 수 있습니다. 스타일을 구하기 쉽고, 많은 테마에서 Contact Form 7을 지원합니다. 설치 에서 Contact Form 7로 검색하여 설치하고 활성화합니다. 폼메일 페이지 만들기 Contact Form 7을 설치하면 기본적으로 하나의 폼이 생성됩니다. 쇼트코드를 복사합니다. 페이지를 만들고, ...

워드프레스 강좌 / 플러그인 / UpdraftPlus / 백업, 복원 플러그인

워드프레스 강좌 / 플러그인 / UpdraftPlus / 백업, 복원 플러그인

UpdraftPlus UpdraftPlus는 워드프레스 전체를 백업하고 복원할 수 있는 플러그인입니다. 현재 백업/복원 플러그인 중에서 가장 인기있는 플러그인으로, 대표적인 특징은 다음과 같습니다. 쉽고 빠른 백업/복원 파일과 DB 모두를 백업/복원 구글 드라이브, 드롭 박스, 원드라이브 등 외부 저장소에 백업 가능 주기적으로 자동 백업 가능 백업 를 클릭합니다. 팝업창에서 를 클릭합니다. 잠시 기다리면 백업이 만들어집니다. 백업 파일은 /wp-content/updraft 폴더에 저장됩니다. 외부 ...

워드프레스 강좌 / Shortcode로 애드센스 광고 본문에 삽입하는 방법

워드프레스로 만든 사이트에 애드센스 광고를 다는 방법은 여러 가지입니다. 사이드바에 넣고 싶다면 위젯 설정에서 사용자 정의 HTML을 이용하면 됩니다. 본문 상단이나 하단에 넣고 싶다면 플러그인을 사용하는 게 편합니다. 만약 본문 중간 원하는 위치에 광고를 넣고 싶다면 어떻게 할까요? 그 때는 쇼트코드(Shortcode)를 이용하는 게 편합니다. 테마의 functions.php에 다음 코드를 추가합니다. 애드센스 광고 ...

워드프레스 강좌 / 링크 없는 메뉴 만드는 방법

워드프레스 강좌 / 링크 없는 메뉴 만드는 방법

워드프레스의 메뉴는 링크를 가지고 있습니다. 하지만 계층형으로 만들거나 메뉴 그룹을 만들 때 링크가 없는 메뉴가 필요할 때가 있습니다. 기본 기능으로는 그러한 메뉴를 만들 수 없지만, 약간의 편법을 사용하면 가능합니다. 사용자정의 링크를 만듭니다. URL에는 아무거나 입력해도 상관없습니다. 뭘 쓸지 고민된다면 #을 입력하면 됩니다. URL이 비어 있으면 메뉴가 만들어지지 않으므로 꼭 입력해야 합니다. 메뉴 수정으로 가서 ...

워드프레스 강좌 / 테마 설치하기, 활성화하기, 삭제하기

워드프레스 강좌 / 테마 설치하기, 활성화하기, 삭제하기

워드프레스는 테마 선택이 중요합니다. 목적에 맞는 테마를 잘 선택하면 적은 노력으로 원하는 결과를 얻을 수 있습니다. 이번 강좌에서는 테마를 어떻게 설치하고 활성화하는지, 그리고 필요 없는 테마를 어떻게 삭제하는지 알아보겠습니다. 테마 활성화하기 로 이동하면, 설치된 테마 목록을 볼 수 있습니다. 테마에 마우스를 올리면 테마 세부사항, 실시간 미리보기, 활성화 버튼이 나타납니다. 을 클릭하면 ...

워드프레스 강좌 / 플러그인 / Google Site Kit by Google / 구글 서비스 통계 보여주는 플러그인

워드프레스 강좌 / 플러그인 / Google Site Kit by Google / 구글 서비스 통계 보여주는 플러그인

사이트나 블로그를 구글 검색 엔진에 등록하려면 Search Console을 이용합니다. 접속 통계는 Google Analytics를 이용하죠. 수익을 얻고 싶다면 구글 애드센스 광고를 게재합니다. 각 서비스의 분석 결과를 보려면 각 사이트에 접속을 해야 하는데, 꽤 귀찮은 작업니다. 만약 워드프레스로 사이트나 블로그를 만들었다면 Google Site Kit by Google 플러그인을 설치하세요. 워드프레스 관리자에서 주요 분석 자료를 ...

워드프레스 강좌 / 플러그인 / Loco Translate / 번역 파일을 수정하거나 새로 만드는 플러그인

워드프레스 강좌 / 플러그인 / Loco Translate / 번역 파일을 수정하거나 새로 만드는 플러그인

번역 워드프레스, 플러그인, 테마는 번역 파일을 이용해서 각 나라의 언어로 표현될 수 있도록 만들어집니다. 번역 파일은 보통 자동으로 설치되고, 다운로드 받아서 사용할 수도 있습니다. 하지만, 번역 파일이 존재하지 않는 플러그인이나 테마가 있을 수도 있고, 번역 파일이 있어도 번역이 마음에 들지 않을 수도 있습니다. 그럴 땐 직접 번역 파일을 만들거나 수정하여 사용할 수 있습니다. Loco Translate Loco ...

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

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

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

워드프레스 강좌 / 플러그인 / Rocket Font / 한글 글꼴 웹폰트로 설정하게 해주는 플러그인

워드프레스 강좌 / 플러그인 / Rocket Font / 한글 글꼴 웹폰트로 설정하게 해주는 플러그인

한글 글꼴 워드프레스 테마는 주로 영어권에서 개발합니다. 영어권이 아닌 곳에서 개발을 해도 영어 사용을 기준으로 개발합니다. 그래서 데모 사이트도 대부분 영어로 되어 있습니다. 여기서 문제가 발생합니다. 영어로 되어 있을 때는 아주 보기 좋은데, 한글로 바뀌면 이상해지는 경우가 많습니다. 멋진 디자인과 타이포그래피에 반해서 테마를 구입했는데, 한글을 사용하는 순간 기대했던 결과가 나오지 않는 ...