워드프레스 – 개발자를 위한 필수템! 예쁜 코드 블럭 플러그인으로 코드 뽐내기

“아니, 코드 블럭이 왜 이렇게 칙칙해?”

개발 블로그를 운영하려는데 기본 코드 블럭이 회색 배경에 글씨만 써져 있어서 너무 예쁘지가 않다.
심지어 코드 블럭에 어떤 언어를 사용했는지도 확인이 안된다. 이런 코드 블럭은 개인적으로 좋아하지 않는다.
개발자에게는 코드가 중요하지만 적어도 내 글을 보러오는 방문자들에게 최대한 코드를 깔끔하고 효과적으로 보여주고 싶다.

이 글에서는 워드프레스 코드 블럭 플러그인,
Code Block Pro – Beautiful Syntax Highlighting 플러그인을 사용하여 코드를 한층 돋보이게 만드는 방법을 설명하려 한다.
복잡한 설정 없이도 플러그인 설치로 간편하고 예쁘게 코드를 표현할 수 있다.

Code Block Pro Beautiful Syntax Highlighting 플러그인: 심플함 속에 강력함!

이 코드 블럭 플러그인 “Code Block Pro Beautiful Syntax Highlighting”는
초보자도 쉽게 사용할 수 있는 직관적인 인터페이스를 자랑한다.
다양한 기능과 커스터마이징 옵션을 제공하면서도 복잡하지 않아서
누구나 손쉽게 사용할 수 있다는 것이 가장 큰 장점인 것 같다.

코드 블럭 플러그인, 설치부터 적용까지 간단 3단계!

Step 1. 플러그인 설치

워드프레스 관리자 페이지에서 “플러그인 추가” 메뉴를 통해 “Code Block Pro – Beautiful Syntax Highlighting”을 검색하여 설치한다.

Step 2. 플러그인 활성화

설치 후 “활성화” 버튼을 눌러 플러그인을 활성화한다.

Step 3. 코드 블럭 추가

글 편집 화면에서 블럭 추가를 위해 “+” 버튼을 클릭하고 “Code Pro” 블록을 선택하여 코드를 입력한다.

코드 블럭 비교

기존 코드 블럭

select * from t1 where col1 = 'a' order by col1;

Code Pro를 사용한 코드 블럭
(이 코드 블럭은 따로 자바스크립트와 CSS를 이용하여 추가로 커스터마이징 된 모습입니다.)

select * from t1 where col1 = 'a' order by col1;

나만의 스타일로 커스터마이징!

Code Block Pro Beautiful Syntax Highlighting 플러그인을 이용하여 다양한 테마와 스타일을 선택할 수 있다.

• 테마 변경: 플러그인 설정에서 기본 제공되는 다양한 테마 중에서 블로그 디자인과 어울리는 테마를 선택할 수 있다.
  • 변경하는 방법 > 블록 – Theme에서 원하는 테마로 변경
• 폰트 및 글꼴 크기 조정: 코드 가독성을 높이기 위해 폰트 스타일과 크기를 조정할 수 있다.
  • 변경하는 방법 > 블록 – Font Styling에서 원하는 글꼴과 크기로 변경
• 줄 번호 표시: 코드 라인을 쉽게 파악할 수 있도록 줄 번호를 표시할 수 있다.
  • 변경하는 방법 > 블록 – Line Settings에서 줄 번호 표시 및 관련 설정
• 복사 버튼 추가: 방문자들이 코드를 쉽게 복사할 수 있도록 복사 버튼을 추가할 수 있다.
  • 변경하는 방법 > 블록 – Buttons – Copy Button을 체크하여 복사 관련 옵션 설정
• 언어 표시: 코드에 사용된 언어가 어떤 언어인지 확인할 수 있다.
  • 변경하는 방법
    1. 블록 – Language – Code Language에서 코드 블럭에 표시할 언어 선택
    2. 블록 – Header Type 혹은 Footer Type에서 원하는 스타일 선택

✨ 커스터마이징 예시 – 코드 블럭에 사용 언어 표시하기
코드 블럭을 선택하면 상단에 언어(이미지에서는 JavaScript)가 나온다.
언어를 선택하면 블럭에서 Language 부분이 나타나는데 여기의 CODE LANGUAGE에서 언어를 선택하면 된다.

Header Type이나 Footer Type에 언어가 표시될 스타일을 선택한다.
예시에서는 Footer Type에 표시하는 것으로 선택했다.

위의 옵션을 적용한 코드 블럭 예시
(이 코드 블럭은 따로 자바스크립트와 CSS를 이용하여 추가로 커스터마이징 된 모습입니다.)

select * from t1 where col1 = 'a' order by col1;