워드프레스에서 신택스 하이라이팅

워드프레스는 직관적인 Gutenberg 블록 에디터를 기본으로 제공하며, 코드 예제를 포함한 다양한 콘텐츠를 손쉽게 구성할 수 있도록 돕습니다. 특히 개발 관련 콘텐츠를 운영하는 경우, 코드에 신택스 하이라이팅을 적용하면 독자들이 내용을 한눈에 파악하기 쉬워집니다. 이 글에서는 Code Syntax Block 플러그인을 중심으로 신택스 하이라이팅 기능을 구현하는 방법을 단계별로 알아보겠습니다.

1. 워드프레스와 코드 편집 환경 이해

최근 워드프레스 버전은 기존의 단축코드 방식보다 시각적이고 직관적인 블록 기반 편집기를 제공합니다. 기본 제공되는 코드 블록은 단순한 텍스트 표시 수준에 머무르는 경우가 많아, 보다 전문적인 하이라이팅 기능을 원한다면 별도의 플러그인 도입이 필요합니다. Code Syntax Block 플러그인은 이러한 요구를 충족시키며, 다양한 프로그래밍 언어의 신택스를 하이라이팅 처리해 줍니다.

2. Code Syntax Block 플러그인 설치 및 활성화

설치 단계

워드프레스 관리자 대시보드 접속: 관리자 페이지에 로그인하여 좌측 메뉴의 플러그인 > 새로 추가를 클릭합니다.
플러그인 검색: 검색 창에 “Code Syntax Block”을 입력한 후, 검색 결과에서 해당 플러그인을 찾습니다.
설치 및 활성화: “설치” 버튼을 클릭하고, 설치가 완료되면 활성화 버튼을 눌러 플러그인을 활성화합니다.

3. Code Syntax Block 사용법

Gutenberg 블록 에디터에서 코드 블록 추가

1. 새 블록 추가: 게시글이나 페이지 편집기에서 플러스(+) 버튼을 클릭하여 블록 목록을 열고, Code Syntax Block 또는 “코드” 관련 블록을 선택합니다.

2. 언어 선택: 블록을 추가한 후 오른쪽에 나타나는 블록 설정 패널에서 하이라이팅할 프로그래밍 언어(예: php, javascript, html, css 등)를 선택합니다. 올바른 언어를 선택해야 올바른 색상과 스타일로 코드가 하이라이팅됩니다.

3. 코드 입력 및 실시간 미리보기: 선택한 코드 블록 내 텍스트 영역에 코드를 입력하면, 입력과 동시에 플러그인이 자동으로 하이라이팅 효과를 적용합니다.

예시 – PHP 코드:

<?php
  echo "Hello, World!";
?>

예시 – JavaScript 코드:

function greet() {
  console.log("Hello, World!");
}
greet();

4. 사용자 정의 및 추가 커스터마이징

기본 스타일 옵션 활용

Code Syntax Block은 몇 가지 기본 테마를 제공하여 간단한 설정 만으로도 매력적인 코드 하이라이팅 효과를 보여줍니다. 블록 설정 패널에서 제공하는 옵션들을 통해 기본 스타일을 적용할 수 있습니다.

추가 CSS를 통한 스타일 조정

사이트의 디자인과 일관되게 코드 블록의 외관을 커스터마이징하고 싶다면, 외모 > 사용자 정의 > 추가 CSS 메뉴에서 CSS 코드를 적용할 수 있습니다. 예를 들어, 다음과 같은 CSS 코드는 코드 영역의 배경색, 글자색, 패딩 등을 조정합니다.

.wp-block-code-syntax pre {
    background-color: #2d2d2d;
    color: #f8f8f2;
    padding: 1rem;
    border-radius: 5px;
    font-size: 14px;
    overflow: auto;
}