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

로

안녕하세요, 워드프레스와 엘리멘터로 멋진 웹사이트를 만들어가는 여러분! 😊 이전 포스팅에서는 Prism.js를 활용해 코드 블록을 예쁘게 하이라이팅하는 방법을 함께 알아봤었죠? 그때 functions.php 파일에 코드를 추가하는 방법을 소개해 드렸는데, 아무래도 테마 파일을 직접 수정하는 건 초보자분들께 조금 부담스러울 수 있겠다는 생각이 들었어요. 😥 “혹시 실수로 사이트가 망가지면 어떡하지?” 하는 걱정, 당연히 들 수 있거든요!

그래서 오늘은 바로 그런 여러분을 위해! functions.php 파일을 전혀 건드리지 않고! 오직 엘리멘터의 강력한 기능인 Custom Code(사용자 정의 코드)만을 이용해서 Prism.js의 스타일(CSS)과 스크립트(JS)를 우리 사이트에 뿅! 하고 추가하는 방법을 알려드리려고 해요. 🪄 이 방법을 사용하면 테마 업데이트 시에도 코드가 사라질 걱정 없이, 엘리멘터 안에서 모든 것을 관리할 수 있어서 정말 편리하답니다! 자, 그럼 지금부터 차근차근 따라 해 볼까요? 😉

✨ 잠깐! 엘리멘터 Custom Code가 뭐길래?

엘리멘터의 Custom Code 기능은 말 그대로 사용자가 직접 작성한 HTML, CSS, JavaScript 코드를 웹사이트의 특정 위치(예: <head>, <body> 시작 또는 끝 부분)에 쉽게 삽입할 수 있도록 도와주는 아주 유용한 도구예요. 이 기능을 사용하면 functions.php 같은 테마 파일을 열어보지 않고도 다양한 스크립트(구글 애널리틱스 추적 코드, 픽셀 코드 등)나 스타일을 사이트 전체 또는 특정 페이지에 적용할 수 있답니다. (❗참고: 이 Custom Code 기능은 Elementor Pro 버전에 포함되어 있을 수 있어요! 만약 Pro 버전이 아니라면, 테마의 ‘사용자 정의하기 > 추가 CSS’ 메뉴나 ‘Insert Headers and Footers’ 같은 플러그인을 대안으로 활용할 수 있답니다. 😊)

1단계: Prism.js 테마 CSS 파일 추가하기 (Custom Code & CDN 활용) 🎨

가장 먼저 Prism.js의 아름다운 코드 하이라이팅 테마를 우리 사이트에 적용해야겠죠? 이전 글에서처럼 CDN(Content Delivery Network)을 활용하면 파일을 직접 다운로드하고 업로드하는 번거로움 없이 아주 간편하게 추가할 수 있어요!

  1. 엘리멘터 Custom Code 메뉴로 이동 : 워드프레스 관리자 페이지에서 [Elementor] → [Custom Code]로 이동해주세요.
  2. 새로운 Custom Code 추가 : [Add New] 버튼을 클릭해서 새로운 사용자 정의 코드를 만듭니다.
  3. 제목 입력 : 나중에 알아보기 쉽도록 “Prism.js Theme CSS” 같이 명확한 제목을 입력해주세요.
  4. 위치(Location) 설정 : CSS 파일은 보통 웹페이지의 <head> 섹션에 위치하는 것이 좋아요. 드롭다운 메뉴에서 <head>를 선택해주세요.
  5. 코드 입력 : 목록 아래에 추가해놓은 HTML 코드 예시처럼, Prism.js 테마 CSS의 CDN 링크를 <link> 태그를 사용해서 입력해주세요. 여기서 우리는 인기 있는 어두운 테마인 “Tomorrow Night”을 사용해 볼게요!만약 다른 테마를 사용하고 싶다면, href 부분의 URL만 원하는 테마의 CDN 주소로 바꿔주시면 된답니다! (예: 기본 밝은 테마는 prism.min.css)
  6. 우선순위(Priority) 설정 : 기본값(1)으로 두셔도 괜찮아요.
  7. [Publish] 버튼 클릭!
  8. 표시 조건(Display Conditions) 설정: 이 CSS를 어느 페이지에 적용할지 묻는 창이 뜰 거예요. 보통 코드 하이라이팅은 사이트 전체에서 필요할 수 있으니 [ENTIRE SITE] (전체 사이트)를 선택하고 [Save & Close] 버튼을 눌러주세요.
  9. 짜잔! 이렇게 하면 Prism.js 테마 CSS 파일이 여러분의 웹사이트 <head> 부분에 쏙! 하고 추가된답니다. 정말 간단하죠? 😊
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.min.css">

2단계: Prism.js 자바스크립트 파일 추가하기 (Custom Code & CDN 활용) ⚙️

이제 실제로 코드 하이라이팅 기능을 수행하는 Prism.js 자바스크립트 파일을 추가할 차례예요. 이것도 CSS 추가와 거의 비슷하답니다!

  1. 새로운 Custom Code 추가: 다시 [Elementor] → [Custom Code] 메뉴로 가서 [Add New] 버튼을 클릭해주세요.
  2. 제목 입력: “Prism.js Scripts”처럼 알아보기 쉬운 제목을 지어주세요.
  3. 위치(Location) 설정: 자바스크립트 파일은 일반적으로 웹페이지 콘텐츠가 로드된 후, <body> 태그가 닫히기 직전에 로드하는 것이 성능에 유리해요. 드롭다운 메뉴에서 Body – End를 선택해주세요.
  4. 코드 입력: 아래 예시처럼 Prism.js 코어 스크립트와 필요한 언어 스크립트의 CDN 링크를 <script> 태그를 사용해서 입력해주세요
    • 중요! 💡
    • prism.min.js (코어 파일)을 가장 먼저 불러와야 해요! 다른 언어 파일들은 이 코어 파일에 의존하기 때문이에요.
    • 기본 prism.min.js에는 HTML, CSS, JavaScript, C-like 언어 하이라이팅 기능이 이미 포함되어 있어요.
    • Python, PHP, Ruby, Go, Bash 등 다른 특정 언어들을 하이라이팅하고 싶다면, 해당 언어의 컴포넌트 JS 파일 CDN 링크를 추가로 넣어주셔야 한답니다. 아래 코드에 Python과 Bash 예시를 적어두었으니 참고해서 필요한 언어들을 추가해보세요! 😊 (어떤 언어들이 있는지 궁금하다면 Prism.js 다운로드 페이지를 확인해보세요!)
  5. 우선순위(Priority) 설정: 기본값(1)으로 두세요.
  6. [Publish] 버튼 클릭!
  7. 표시 조건(Display Conditions) 설정: 이것도 CSS와 마찬가지로 [ENTIRE SITE]를 선택하고 [Save & Close] 버튼을 눌러주세요.
<!-- Prism.js Core (HTML, CSS, JS, C-like 기본 포함) -->
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>

<!-- 예시: Python 언어 지원 추가 -->
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-python.min.js"></script>

<!-- 예시: Bash/Shell 언어 지원 추가 -->
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-bash.min.js"></script>

<!-- 필요한 다른 언어들도 이런 방식으로 추가할 수 있어요! -->
<!-- 예: PHP, Ruby, Go, Java, C#, Swift 등등 -->
<!-- 사용 가능한 컴포넌트 목록: https://prismjs.com/download.html -->

자, 이제 Prism.js의 스타일과 기능 모두 여러분의 사이트에 성공적으로 탑재되었어요! 🎉 정말 수고 많으셨어요!

3단계: Elementor HTML 위젯으로 코드 보여주기 (복습 타임! 🧱)

CSS와 JS 파일을 성공적으로 추가했으니, 이제 실제로 코드를 페이지에 보여줄 차례인데요, 이 부분은 이전 포스팅에서 자세히 설명드렸던 것과 똑같아요! 😊 기억이 가물가물하시다면 아래 핵심만 다시 한번 복습해 볼까요?

  1. 엘리멘터 편집 화면에서 HTML 위젯을 원하는 위치에 끌어다 놓으세요.
  2. HTML 위젯의 코드 입력창에 아래와 같은 형식으로 코드를 입력하세요.
  3. 여기서 가장 중요한 건 class=”language-xxxx” 부분! xxxx 자리에 해당 코드의 언어 이름을 정확히 적어주셔야 해요. (예: language-python, language-javascript, language-html 등)
<pre><code class="language-xxxx">
여기에 여러분의 코드를
예쁘게 넣어주시면 됩니다!
파이썬 코드라면 이렇게!
def hello_world():
    print("Hello, Prism.js!")
</code></pre>

이것만 기억하시면 여러분의 코드 블록이 아름답게 변신할 거예요! 😉

왜 엘리멘터 Custom Code를 써야할까? (장점 요약! 💯)

“그래서 functions.php 수정하는 것보다 이게 뭐가 더 좋은 건데?” 하고 궁금해하실 분들을 위해 장점을 간단히 요약해 드릴게요!

  • 👍 테마 파일 직접 수정 NO! 안전 제일!: 테마 파일을 잘못 건드려서 사이트가 하얗게 변하는 무서운 경험을 할 필요가 없어요!
  • 👍 엘리멘터 안에서 모든 관리 OK!: CSS나 JS 코드를 추가하거나 수정할 때 엘리멘터 UI 안에서 바로바로 처리할 수 있어서 정말 편리해요.
  • 👍 테마 업데이트에도 끄떡없음!: 테마를 업데이트해도 내가 추가한 코드가 사라질 걱정이 없답니다. (단, 엘리멘터 플러그인은 최신 버전으로 유지하는 게 좋겠죠?)
  • 👍 초보자에게 훨씬 친숙함!: 코드를 직접 다루는 게 익숙하지 않은 분들도 훨씬 쉽게 접근할 수 있어요.

물론 functions.php를 사용하는 방법도 장점이 있지만, 엘리멘터를 주로 사용하시는 분들께는 Custom Code 기능이 훨씬 더 직관적이고 안전한 선택이 될 수 있답니다! 😊

마무리: 이제 코딩 걱정 없이 마음껏 공유하세요!

짠, 엘리멘터의 Custom Code 기능을 이용하니까 functions.php 파일을 열어보지 않고도 Prism.js를 정말 쉽고 간편하게 설치할 수 있었습니다. 😊 이제 테마 파일을 건드려야 한다는 부담감 없이, 여러분의 소중한 코드들을 더욱 예쁘고 명확하게 공유할 수 있어요!

오늘 이 꿀팁이 여러분께 큰 도움이 되었기를 바라며, 다음에 또 유용한 정보로 찾아오겠습니다! 그때까지 안녕! 👋

이전의 functions.php 파일을 수정하는 방법을 보고싶다면, 아래 링크를 확인해보세요!

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

“엘리멘터 Custom Code로 Prism.js 설치 끝! (functions.php 수정 없이 코드 하이라이팅 완성 ✨)”에 대한 1개의 생각

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

댓글 남기기