워드프레스 코드블록 예쁘게 꾸미기 - PrismJS로 코드 하이라이트 적용하기

PrismJS로 코드 하이라이트 적용한 결과 화면 캡쳐 — ( 코드 하이라이트 적용한 결과 )

안녕하세요! 혹시 여러분도 워드프레스 블로그에 코드를 올렸는데, 너무 밋밋하게 보여서 고민이신가요? 저도 처음에는 그랬답니다.

하지만 걱정 마세요! 오늘은 여러분의 코드를 예쁘게 만들어주는 ‘코드 하이라이트’ 기능을 워드프레스에 추가하는 방법을 알려드릴게요.

특히 PrismJS(프리즘제이에스)라는 강력한 오픈소스 툴를 사용해서, 플러그인 없이도 멋진 Code Hightlight를 구현하는 방법을 처음부터 끝까지 자세히 알아보겠습니다!

1. PrismJS란?

프리즘제이에스는 현대적인 웹 표준을 기반으로 만들어진 가벼운 Code Hightlight 도구입니다. 수많은 웹사이트에서 사용되고 있으며, 여러분의 코드가 더욱 읽기 쉽고 전문적으로 보이게 해줍니다. 프리즘제이에스는 다양한 테마와 플러그인을 제공하므로, 블로그 스타일에 맞게 커스터마이징할 수 있어요.

2. PrismJS 파일 업로드

프리즘제이에스를 적용하려면 먼저 필요한 파일을 다운로드한 후 현재 본인의 워드프레스 테마 폴더에 업로드해야 합니다.

코드 하이라이트 적용 대상 언어 선택 화면 — ( 코드 하이라이트 적용 대상 언어 선택 )

2-1. 파일 다운로드

PrismJS 공식 사이트로 이동해서 Download 버튼을 클릭합니다.
압축 수준은 Minified version(최소화된 버전)을 선택합니다.
테마는 Okaidia(추천)를 선택합니다.
필요한 언어를 선택합니다. 기본적으로 Markup, CSS, C-like, JavaScript, 그리고 PHP를 선택하세요. 저는 추가로 Python과 R을 선택했습니다.
플러그인 중 “Copy to Clipboard Button”을 선택하여 코드 복사 기능을 추가합니다.
Download JS와 Download CSS 버튼을 클릭하여 파일을 다운로드합니다.

2-2. 워드프레스에 파일 업로드

다운로드한 prism.js와 prism.css 파일을 현재 자신이 적용 중인 워드프레스 테마의 디렉토리 안에 assets/js 및 assets/css 폴더에 업로드합니다. 최종 경로는 다음과 같아야 합니다. your-theme는 현재 적용 중인 테마(예. Kadence, Twenty Twenty-Five 등)의 폴더를 의미합니다.

/wp-content/themes/your-theme/assets/js/prism.js
/wp-content/themes/your-theme/assets/css/prism.css

3. `functions.php` 과 `prism.js` 파일 설정

PrismJS를 워드프레스에서 적용하려면 functions.php 파일을 수정해야 합니다. 이번 포스트에서 중요한 부분 중 하나가 바로 이 부분이니 집중해서 내용을 리뷰하고 따라 해보시기 바랍니다.

3-1. `functions.php` 코드 추가

워드프레스 관리자 화면에서 모양(Apperance) > 테마 파일 편집기(Theme File Editor)로 이동합니다.
자식 테마의 functions.php 파일을 엽니다. 여기서 자식 테마를 사용해야 하는 이유는 자식 테마를 사용하면 부모 테마가 업데이트되어도 여러분의 커스터마이징이 유지됩니다. 자식 테마가 아닌 경우는 설정을 하시고 하는게 좋습니다.
아래 코드를 functions.php 소스코드의 하단에 추가하고 업데이트를 합니다.

function enqueue_prism_scripts() {
    // Prism CSS
    wp_enqueue_style(
        'prism-css',
        get_stylesheet_directory_uri() . '/assets/css/prism.css',
        array(),
        '1.29.0'
    );

    // Prism JS
    wp_enqueue_script(
        'prism-js',
        get_stylesheet_directory_uri() . '/assets/js/prism.js',
        array(),
        '1.29.0',
        true
    );
}
add_action('wp_enqueue_scripts', 'enqueue_prism_scripts');

이 코드는 PrismJS와 CSS 파일을 모든 페이지에서 로드합니다. 특정 페이지에서만 로드하려면 조건문을 추가할 수도 있습니다.

3-2. `prism.js` 코드 추가

Prism.js 다운로드 시 선택한 플러그인(예: Toolbar, Copy to Clipboard)을 사용하려면 다음을 추가하세요. 해당 파일은 /wp-content/themes/your-theme/assets/js/prism.js 여기에 있습니다. 위처럼 테마 편집기를 이용하면 쉽게 적용할 수 있습니다.

// Toolbar 플러그인 활성화
document.addEventListener('DOMContentLoaded', function () {
    Prism.plugins.toolbar.registerButton('copy-to-clipboard', function (env) {
        var button = document.createElement('button');
        button.innerHTML = 'Copy';
        button.addEventListener('click', function () {
            navigator.clipboard.writeText(env.code);
        });
        return button;
    });
});

이 코드를 추가하면 코드블록에서 ‘COPY’ 버튼을 통해 해당 소스코드를 한번에 복사할 수 있습니다.

4. 구텐베르크 에디터에서 사용하기

구텐베르크 에디터에서 PrismJS를 적용하려면 다음 단계를 따르세요. 이 에디터가 뭔지 싶으시겠지만 평소에 사용하시는 포스트 에디터입니다.

코드 블록을 추가하거나 선택합니다. 이건 아시다시피 ‘/code’ 를 입력하시면 됩니다.
마우스 커서를 코드 블록에 둔 상태에서 설정(Settings) – 블록(Block) 패널의 ‘고급(Advanced)‘ 섹션으로 이동합니다.
Additional CSS class(es) 필드에 language-[언어명]을 입력합니다. 예를 들자면, JavaScript 코드 → language-javascript 와 같이 하시면 됩니다.

5. 주의사항과 팁

항상 자식 테마를 사용하세요. 부모 테마가 업데이트되어도 설정이 유지됩니다.
필요한 언어만 선택하여 파일 크기를 최적화하세요. 파일이 작을수록 페이지 로딩 속도가 빨라집니다.
코드 복사 기능을 추가하면 방문자들이 더 편리하게 코드를 사용할 수 있어요.
테마 색상과 어울리는 PrismJS 테마를 선택하세요. 가독성이 좋아집니다.

6. 문제 해결 및 FAQ

Q: 코드 하이라이트가 적용되지 않아요.
A: functions.php 파일에 코드를 정확히 입력했는지, 그리고 prism.js와 prism.css 파일이 올바른 위치에 있는지 확인해보세요.

Q: 특정 언어의 하이라이트가 작동하지 않습니다.
A: PrismJS 다운로드 시 해당 언어를 선택했는지 확인하세요. 필요하다면 다시 다운로드하여 적용해보세요.

Q: 페이지 로딩 속도가 느려졌어요.
A: 불필요한 언어와 플러그인을 제거하고, 파일을 최소화(minify)하여 다시 시도해보세요.

마무리

이제 여러분도 전문가처럼 코드를 예쁘게 표시할 수 있겠죠? 혹시 궁금한 점이 있으시다면 댓글로 남겨주세요. 함께 해결해보아요! 😊

혹시 이게 너무 어렵거나 어지럽다고 생각하시는 분은 그냥 코드 복사 버튼만 적용하는 방법을 워드프레스에서 코드 복사 버튼 쉽게 만들기: WPCode로 뚝딱! 포스트를 통해서 확인해보세요!

#용어 해설

wp_enqueue_scripts: 워드프레스에서 스크립트와 스타일을 올바르게 로드하는 방법
코드 하이라이트: 프로그래밍 코드를 보기 좋게 색상과 스타일로 강조하는 기능
PrismJS: 자바스크립트 기반의 코드 구문 강조 라이브러리
구텐베르크: 워드프레스의 기본 블록 편집기
자식 테마: 부모 테마의 기능을 유지하면서 수정할 수 있는 하위 테마
신택스 하이라이팅: 프로그래밍 언어의 문법을 색상으로 구분해주는 기능
functions.php: 워드프레스 테마의 기능을 확장할 수 있는 PHP 파일

워드프레스 코드블록 예쁘게 꾸미기 – PrismJS로 코드 하이라이트 적용하기

1. PrismJS란?