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

안녕하세요! 여러분도 워드프레스 블로그에서 코드를 작성했을 때, 코드가 너무 밋밋하고 읽기 어려워 보이지 않으셨나요? 저도 처음엔 그런 고민을 많이 했었답니다. 오늘은 PrismJS라는 멋진 도구를 사용해서 워드프레스 블로그에서 코드를 예쁘고 깔끔하게 적용하는 방법을 알아봅니다.PrismJS는 가벼운 오픈소스 코드 하이라이터로, 코드 블록에 다양한 색상과 스타일을 적용해 코드가 한눈에 보기 쉽게 만들어 줍니다. 그럼, 이제부터 PrismJS를  활용해서 워드프레스 블로그에  코드를 적용하는 방법을 시작해볼까  합니다.

1. PrismJS란?

PrismJS는 웹 표준을 기반으로 만들어진 가벼운 코드 하이라이트 도구입니다. 여러 웹사이트에서 사용되고 있으며, 사용자가 코드를 더욱 읽기 쉽고 전문적으로 보이게 만들어 줍니다. 다양한 색상 테마와 기능을 제공하여, 블로그 스타일에 맞게 커스터마이즈할 수 있습니다.PrismJS를 사용하면, 코드 블록을 쉽게 꾸밀 수 있으며, 코드의 가독성을 높여 방문자들에게 보다 직관적인 경험을 제공합니다.

2. PrismJS 파일 업로드

2-1. 파일 다운로드

PrismJS를 사용하려면 먼저 필요한 파일들을 다운로드해야 합니다. 아래의 단계를 따라 진행하시면 됩니다.

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

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

다운로드한 prism.js와 prism.css 파일을 현재 적용 중인 워드프레스 테마 폴더에 업로드해야 합니다. 파일을 업로드할 위치는 assets/js와 assets/css 폴더입니다. 최종 경로는 다음과 같습니다:

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

3. functions.php와 prism.js 파일 설정

3-1. functions.php 코드 추가

워드프레스에서 PrismJS를 적용하려면 functions.php 파일을 수정해야 합니다. 

  1. 워드프레스 관리자 화면에서 **모양(Apperance) > 테마 파일 편집기(Theme File Editor)**로 이동합니다.
  2. 자식 테마의 functions.php 파일을 엽니다. (자식 테마를 사용하면 부모 테마가 업데이트되어도 커스터마이징한 내용이 유지됩니다.)
  3. 아래 코드를 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 코드 추가

PrismJS에서 선택한 플러그인(예: Toolbar, Copy to Clipboard)을 사용하려면, 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를 적용하는 방법도 간단합니다. 아래의 단계를 따라 하시면 됩니다.

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

5. 주의사항과 팁

  • 자식 테마 사용: 자식 테마를 사용하면 부모 테마가 업데이트되어도 설정이 유지됩니다. 자식 테마를 사용하지 않으면, 테마 업데이트 시 변경 사항이 사라질 수 있습니다.
  • 필요한 언어만 선택: PrismJS에서 제공하는 언어를 모두 선택할 수 있지만, 필요한 언어만 선택하여 파일 크기를 최적화하면 페이지 로딩 속도가 빨라집니다.
  • 코드 복사 기능 추가: 복사 기능을 추가하면 방문자들이 코드를 더 편리하게 사용할 수 있습니다.
  • PrismJS 테마 선택: 테마 색상과 어울리는 PrismJS 테마를 선택하여 가독성을 높이는 것이 좋습니다.

오늘은 워드프레스 블로그에서 PrismJS를 사용하여 코드 하이라이트를 예쁘게 적용하는 방법을 알아보았습니다. 이 방법을 통해 여러분의 코드가 훨씬 더 깔끔하고 전문적으로 보일 수 있을 거예요. 코드 복사 기능도 추가하여 방문자들이 편리하게 코드를 활용할 수 있도록 도와줍니다. 이제, 여러분의 워드프레스 블로그에서 멋진 코드 하이라이트를 활용해서 코드를 공유해 보세요!