워드프레스 코드 블록 예쁘게 꾸미기 PrismJS 적용하는 쉬운 방법

안녕하세요! 블로그에 코드를 올릴 때 그냥 검은 글씨로만 보여서 답답했던 적 없으신가요? 저도 처음엔 코드가 너무 밋밋해서 읽기 힘들다는 이야기를 듣고 고민이 많았답니다. 오늘은 PrismJS라는 도구를 써서 워드프레스 블로그의 코드를 알록달록 예쁘게 만드는 방법을 알려드릴게요. 이걸 적용하면 방문자들이 코드를 훨씬 편하게 볼 수 있고, 블로그도 훨씬 전문적으로 보일 거예요. 차근차근 따라 해보시면 어렵지 않아요.

1. PrismJS가 뭔가요?

PrismJS는 웹사이트에 작성된 코드를 보기 좋게 하이라이팅 해주는 가벼운 도구예요. 이미 많은 유명한 사이트에서 쓰고 있을 정도로 인기가 많죠. 이걸 쓰면 코드의 중요 부분마다 색상이 입혀져서 가독성이 확 좋아져요. 테마도 다양해서 내 블로그 분위기에 딱 맞는 스타일로 꾸밀 수 있다는 점도 참 매력적인 것 같아요. 방문자들에게 더 좋은 경험을 주고 싶다면 꼭 써보시는 걸 추천드려요.

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 파일을 워드프레스 테마 폴더에 넣어줄 차례예요. FTP나 호스팅 파일 관리자를 열어서 assets/js와 assets/css 폴더에 각각 넣어주시면 됩니다. 경로는 보통 아래처럼 되어 있을 거예요.

/wp-content/themes/사용중인테마/assets/js/prism.js
/wp-content/themes/사용중인테마/assets/css/prism.css

3. functions.php 파일 설정하기

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

워드프레스가 방금 올린 파일들을 인식할 수 있도록 연결해 줘야 해요. 관리자 화면에서 **모양 > 테마 파일 편집기**로 이동해서 작업해 볼게요.

오른쪽 파일 목록에서 자식 테마(Child Theme)의 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가 작동하게 돼요. 혹시 특정 글에서만 쓰고 싶다면 조건문을 넣어서 설정할 수도 있답니다.

3-2. 복사 버튼 기능 활성화

아까 다운로드할 때 ‘Copy to Clipboard’ 플러그인을 선택하셨나요? 그렇다면 prism.js 파일 안에 아래 코드를 추가해 줘야 버튼이 실제로 작동해요. 이 코드를 넣으면 방문자가 ‘COPY’ 버튼 한 번만 눌러서 긴 코드를 싹 복사할 수 있어서 정말 편리해요.

// 툴바 및 복사 버튼 활성화
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;
    });
});

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

설정이 다 끝났으니 이제 글을 쓸 때 어떻게 적용하는지 알아볼까요? 구텐베르크 에디터에서 아주 간단하게 쓸 수 있어요.

에디터에서 /code를 입력하거나 블록 추가 버튼을 눌러 코드 블록을 만들어주세요.
코드를 작성한 뒤, 오른쪽 설정 패널에서 ‘고급(Advanced)’ 탭을 펼쳐주세요.
추가 CSS 클래스(Additional CSS class) 칸에 language-언어이름을 적어주면 끝이에요. 예를 들어 자바스크립트 코드라면 language-javascript라고 적으면 된답니다.

5. 알아두면 좋은 꿀팁

자식 테마 사용하기: 부모 테마 파일을 직접 수정하면 나중에 테마가 업데이트될 때 수정 사항이 싹 날아갈 수 있어요. 꼭 자식 테마를 사용해서 안전하게 수정하는 게 좋아요.
필요한 언어만 고르기: 욕심부려서 모든 언어를 다 선택하면 파일이 무거워져서 사이트가 느려질 수 있어요. 내가 자주 쓰는 언어만 쏙쏙 골라서 받는 게 현명해요.
복사 버튼은 필수: 긴 코드를 일일이 드래그해서 복사하는 건 꽤 귀찮은 일이잖아요? 복사 버튼을 달아주면 방문자들이 정말 고마워할 거예요.
테마 깔맞춤: PrismJS 테마가 여러 가지 있으니, 내 블로그 디자인과 잘 어울리는 색상으로 골라보세요. 보기에 편해야 글도 더 잘 읽히니까요.

오늘은 이렇게 PrismJS를 활용해서 워드프레스 블로그의 코드를 예쁘게 꾸미는 방법을 알아봤어요. 조금 번거로울 수도 있지만, 한 번 설정해 두면 글 쓸 때마다 코드가 깔끔하게 보여서 정말 뿌듯하실 거예요. 방문자들에게도 훨씬 전문적인 느낌을 줄 수 있고요. 지금 바로 적용해서 멋진 기술 블로그를 만들어보세요!