워드프레스 코드 하이라이팅, 플러그인 없이 Prism.js로 직접 해결! (Elementor 사용자라면 주목!) ✨

안녕하세요, 코딩하는 멋진 워드프레스 블로거 여러분! 😊 혹시 블로그에 코드 예제를 올릴 때마다 “어떻게 하면 더 예쁘고 가독성 좋게 보여줄 수 있을까?” 고민해 본 적 없으신가요? 워드프레스에는 다양한 Code Syntax Highlighter 플러그인들이 있지만, 때로는 내 마음에 쏙 드는 것을 찾기 어렵거나, “플러그인을 너무 많이 설치하는 건 부담스러운데…” 하는 생각이 들 때도 있죠. 😅

바로 그런 여러분을 위해! 오늘은 플러그인 없이, 가볍고 강력한 자바스크립트 라이브러리인 Prism.js를 워드프레스 사이트에 직접 적용해서, 코드를 아름답게 하이라이팅하는 방법을 알려드리려고 해요! 🤩 특히 Elementor 페이지 빌더를 사용하고 계신다면 더욱 주목해주세요! HTML 위젯을 활용해서 아주 간단하게 적용할 수 있답니다. 제가 옆에서 하나하나 친절하게 안내해 드릴 테니, 코딩 초보라도 걱정 말고 따라오세요! 😉

1단계: Prism.js 내 사이트에 초대하기 (CSS & JS 파일 로드) 💌

가장 먼저 할 일은 Prism.js가 우리 웹사이트에서 마법을 부릴 수 있도록, 필요한 CSS 스타일 파일과 자바스크립트 파일을 불러오는 거예요. 마치 파티에 특별한 손님을 초대하는 것과 같답니다! 😊 방법은 크게 두 가지가 있어요.

방법 A: CDN 사용하기 (간편하고 빨라서 추천! 👍)

CDN(Content Delivery Network)을 사용하면, 이미 전 세계 여러 서버에 준비되어 있는 Prism.js 파일을 가져다 쓰는 거라 아주 편리하고 빨라요! 별도로 파일을 다운로드하거나 업로드할 필요가 없답니다.

워드프레스 관리자 메뉴에서 [모양] → [테마 파일 편집기]로 이동해서 functions.php 파일을 직접 수정하거나, Code Snippets 같은 코드 삽입 플러그인을 사용해서 아래 PHP 코드를 추가해주세요. (⚠️주의⚠️ functions.php 파일을 직접 수정하는 과정에서 오류 발생시, 워드프레스가 정상동작 하지 않을 수 있으므로 반드시 백업을 먼저 하고, 아주 조심스럽게 작업해야 합니다!, 워드프레스 화면이 깨진다거나, 기능이 동작하지 않으면 백업한 파일로 다시 덮어써서 복구하세요)

<?php
/**
 * Prism.js 에셋(CSS & JS)을 사이트에 로드합니다.
 */
function my_theme_enqueue_prism_assets() {
    // Prism.js 기본 테마 (여기서는 'Tomorrow Night' 어두운 테마 사용)
    wp_enqueue_style(
        'prismjs-theme-css', // 스타일시트 핸들 이름 (고유하게)
        'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.min.css', // 테마 CSS 파일 CDN 주소
        array(), // 의존성 없음
        '1.29.0' // 버전 정보
    );

    // Prism.js 코어 스크립트 파일
    wp_enqueue_script(
        'prismjs-core-js', // 스크립트 핸들 이름 (고유하게)
        'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js', // 코어 JS 파일 CDN 주소
        array(), // 의존성 없음
        '1.29.0', // 버전 정보
        true // true로 설정하면 </body> 태그 직전에 로드 (권장)
    );

    // ⭐ 선택 사항: 추가로 지원하고 싶은 프로그래밍 언어 스크립트 로드 ⭐
    // 예시: Python 언어 지원 추가
    wp_enqueue_script(
        'prismjs-lang-python',
        'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-python.min.js',
        array('prismjs-core-js'), // 'prismjs-core-js'가 먼저 로드된 후 실행
        '1.29.0',
        true
    );

    // 예시: JavaScript 언어 지원 추가 (기본 코어에 포함되어 있지만 명시적으로 추가 가능)
    // wp_enqueue_script(
    //     'prismjs-lang-javascript',
    //     'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-javascript.min.js',
    //     array('prismjs-core-js'),
    //     '1.29.0',
    //     true
    // );

    // 예시: Bash/Shell 언어 지원 추가
    wp_enqueue_script(
        'prismjs-lang-bash',
        'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-bash.min.js',
        array('prismjs-core-js'),
        '1.29.0',
        true
    );

    // 필요한 다른 언어들도 이런 방식으로 추가할 수 있어요!
    // (예: prism-lua.min.js, prism-java.min.js 등)
    // 사용 가능한 컴포넌트 목록: https://prismjs.com/download.html
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_prism_assets' );
?>

코드 설명 🔍

wp_enqueue_style(): Prism.js 테마 CSS 파일을 불러와요. 위 예시에서는 어두운 배경에 잘 어울리는 prism-tomorrow.min.css 테마를 사용했어요. 다른 테마를 원하시면 해당 테마의 CDN 주소로 변경하면 된답니다! (예: 기본 밝은 테마는 prism.min.css)
wp_enqueue_script(): Prism.js 핵심 자바스크립트 파일(prism.min.js)과, 여러분이 하이라이팅하고 싶은 특정 프로그래밍 언어 파일들(예: prism-python.min.js, prism-bash.min.js)을 불러와요. 기본 prism.min.js에는 HTML, CSS, JavaScript, C-like 언어가 이미 포함되어 있어요. 다른 언어(Python, PHP, Ruby, Go 등)를 사용하려면 해당 언어의 컴포넌트 파일을 추가로 로드해주셔야 해요! 😊
add_action('wp_enqueue_scripts', 'my_theme_enqueue_prism_assets');: 워드프레스가 웹페이지에 필요한 스크립트와 스타일을 불러올 때, 우리가 만든 my_theme_enqueue_prism_assets 함수도 함께 실행하라고 알려주는 거예요.

어떤 언어들을 지원하고 싶은지에 따라 wp_enqueue_script 부분을 필요한 만큼 추가하거나 수정해주시면 된답니다! Prism.js 공식 다운로드 페이지(https://prismjs.com/download.htm l)에서 지원하는 언어와 플러그인 목록을 확인할 수 있어요. ✨

방법 B: 직접 다운로드 및 설치 (원하는 것만 골라 담기! 🛍️)

만약 CDN 사용이 어렵거나, 꼭 필요한 언어와 테마, 플러그인만 선택해서 용량을 최소화하고 싶다면 Prism.js 공식 웹사이트에서 직접 파일을 다운로드해서 설치할 수도 있어요.

Prism.js 다운로드 페이지 방문: https://prismjs.com/download.html
테마(Theme) 선택: 마음에 드는 테마를 하나 고르세요. (예: Tomorrow Night, Okaidia, Default 등)
코어(Core)는 기본 선택되어 있어요.
언어(Languages) 선택: 여러분의 블로그에서 사용할 프로그래밍 언어들을 모두 체크하세요. (예: Python, PHP, JavaScript, HTML, CSS, Bash, SQL 등)
플러그인(Plugins) 선택 (선택 사항): 라인 넘버, 복사 버튼 등 유용한 추가 기능들을 선택할 수 있어요.
페이지 하단의 [DOWNLOAD JS] 버튼과 [DOWNLOAD CSS] 버튼을 각각 클릭해서 prism.js 파일과 prism.css 파일을 다운로드하세요.
다운로드한 prism.js 파일과 prism.css 파일을 여러분의 워드프레스 테마 폴더 안의 적절한 위치(예: /js/ 폴더, /css/ 폴더)에 업로드하세요. (FTP 프로그램이나 호스팅 파일 관리자를 이용하면 돼요.)
그리고 functions.php 파일에 아래와 같이 코드를 추가해서 업로드한 파일들을 불러오세요. (파일 경로는 실제 업로드한 위치에 맞게 수정해야 해요!)

<?php
function my_theme_enqueue_local_prism_assets() {
    // 직접 업로드한 Prism.js 테마 CSS 파일 로드
    wp_enqueue_style(
        'prismjs-local-theme-css',
        get_stylesheet_directory_uri() . '/css/prism.css', // 실제 CSS 파일 경로
        array(),
        '1.29.0' // 다운로드한 버전
    );

    // 직접 업로드한 Prism.js 스크립트 파일 로드
    wp_enqueue_script(
        'prismjs-local-core-js',
        get_stylesheet_directory_uri() . '/js/prism.js', // 실제 JS 파일 경로
        array(),
        '1.29.0', // 다운로드한 버전
        true
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_local_prism_assets' );
?>

어떤 방법을 선택하든, 이제 여러분의 사이트에 Prism.js가 성공적으로 초대되었어요! 🎉

2단계: Elementor에서 Prism.js로 코드 보여주기 (HTML 위젯 활용! 🧱)

자, 이제 초대한 Prism.js 손님이 실제로 일할 시간이에요! Elementor를 사용하고 있다면, 코드를 보여주는 것은 정말 간단하답니다. Elementor의 HTML 위젯을 사용하면 되거든요! 😊 일단 아래의 코드를 보고 그 다음 순서대로 진행해 주세요!.

<pre class="language-xxxx"><code>
<!-- 여기에 여러분의 코드를 넣어주세요! -->
여기에 여러분의 코드를
예쁘게
넣어주시면 됩니다!
</code></pre>

Elementor 편집 화면 열기 : 코드를 넣고 싶은 글(Post)이나 페이지(Page)를 Elementor로 편집하기 위해 열어주세요.
HTML 위젯 찾아서 드래그 : 왼쪽 Elementor 위젯 패널에서 HTML위젯을 검색해서 찾은 다음, 페이지의 원하는 위치로 쭉 끌어다 놓으세요.
HTML 코드 입력 : 방금 추가한 HTML 위젯의 HTML 코드 입력창에 위에 먼저 보여드린 형식으로 여러분의 코드를 넣어주세요.
HTML 위젯에 입력할 때 가장 중요한 부분! 💡
- <pre class="language-xxxx"> 부분을 확인하셔야 해요! 여기서 xxxx 자리에 해당 코드의 프로그래밍 언어 이름을 정확하게 적어주셔야 실행이 된답니다.
- Python 코드라면: class="language-python"
- JavaScript 코드라면: class="language-javascript" 또는 class="language-js"
- HTML 코드라면: class="language-html" 또는 class="language-markup"
- CSS 코드라면: class="language-css"
- PHP 코드라면: class="language-php"
- Bash/Shell 스크립트라면: class="language-bash"
- Lua 코드라면: class="language-lua"
- ..헥헥 😅 이렇게 언어에 맞는 클래스를 지정해주면, Prism.js가 “아하! 이 코드는 Python이구나!” 하고 알아채서 해당 언어의 문법에 맞게 예쁘게 색칠을 해준답니다. 정말 똑똑하죠? 😉
저장하고 미리보기 : 코드를 다 입력했으면 페이지를 저장하고, 실제 페이지에서 어떻게 보이는지 확인해보세요! ✨

⚠️ 잠깐! HTML 특수문자 처리하기

만약 HTML 코드 자체를 예제로 보여주고 싶다면, < 나 > 같은 문자들은 HTML에서 특별한 의미를 가지기 때문에 그대로 쓰면 문제가 생길 수 있어요. 이럴 때는 이 문자들을 HTML 엔티티 코드로 바꿔서 넣어주셔야 해요. (예: <는 <로, >는 >로) 온라인에 ‘HTML Entity Converter‘ 같은 도구를 검색해서 사용하면 편리하답니다!

3단계: 마음에 드는 테마로 분위기 바꾸기 (CSS 테마 선택! 🎨)

Prism.js는 다양한 기본 테마를 제공해요. 앞서 ‘방법 A: CDN 사용하기’에서 wp_enqueue_style 부분에 테마 CSS 파일 주소를 넣었죠? 그 주소를 바꿔주기만 하면 다른 테마로 쉽게 변경할 수 있답니다! 😊

기본적으로 많이 사용되는 테마 몇 가지를 소개해 드릴게요:

Default (prism.min.css): 아주 깔끔한 밝은 톤의 기본 테마예요.
CDN: https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css
Tomorrow Night (prism-tomorrow.min.css): 제가 위 예시에서 사용한, 인기 많은 어두운 테마예요. 개발자들에게 익숙한 느낌이죠!
CDN: https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.min.css
Okaidia (prism-okaidia.min.css): 또 다른 멋진 어두운 테마예요. Sublime Text 에디터의 기본 테마와 비슷하답니다.
CDN: https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-okaidia.min.css
Funky (prism-funky.min.css): 이름처럼 조금 더 통통 튀는 색감의 밝은 테마예요.
CDN: https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-funky.min.css
Solarized Light (prism-solarizedlight.min.css): 눈이 편안한 Solarized 색상 팔레트의 밝은 버전이에요.
CDN: https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-solarizedlight.min.css

이 외에도 다양한 테마들이 있으니, Prism.js 공식 웹사이트의 테마 섹션(https://prismjs.com/index.html#themes)에서 직접 구경해보시고 마음에 드는 테마를 골라보세요! 마음에 드는 테마를 찾았다면, functions.php 또는 코드 삽입 플러그인에 있는 wp_enqueue_style의 CDN 주소만 해당 테마의 주소로 바꿔주면 바로 적용된답니다! ✨

마무리: 이제 여러분의 코드도 빛날 시간! 🌟

휴! 여기까지 따라오시느라 정말 고생 많으셨어요! 😊 이제 여러분의 워드프레스 블로그에서도 플러그인 없이 Prism.js를 이용해서 코드를 정말 예쁘고 전문적으로 보여줄 수 있게 되었답니다! Elementor의 HTML 위젯과 약간의 PHP, HTML 코드만으로 이런 멋진 기능을 구현할 수 있다니, 정말 신기하지 않나요? 😉

코드를 공유하는 것은 지식을 나누는 아름다운 일이에요. Prism.js가 여러분의 소중한 코드들이 더욱 빛나고, 다른 사람들에게 더 잘 전달될 수 있도록 도와줄 거예요. 앞으로도 즐겁게 코딩하고, 멋진 내용 많이 많이 공유해주세요! 💪❤️

오늘 내용이 유용했다면, 주변에 코딩하는 친구들에게도 살짝 알려주는 센스! 잊지 마시고요! 🥰

혹시 funtions.php 편집이 부담스럽다면, 다음 게시물을 확인해보세요!

엘리멘터 Custom Code로 Prism.js 설치 끝! (functions.php 수정 없이 코드 하이라이팅 완성 ✨)