여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. 워드프레스에 Prism.js 을 넣어 구문 강조 만들기
회원가입
로그인이 되지 않았습니다.
회원가입

워드프레스에 Prism.js 을 넣어 구문 강조 만들기

카테고리: 공부 » 워드프레스 » 
3개월전 작성

HTML, CSS, JS, PHP 등 언어를 블로그에 올릴 때 플러그인 없이 사용하고 싶어졌다.

Prism.js랑 Highlight.js 중에 고민하다가 Prism.js가 더 가볍다고 해서 Prism.js로 결정했다.

Prism.js 이용하여 구문 강조 하는 방법 알아보자.

구문 강조 (Syntax Highlighter)

구문 강조 파일

구문 강조 파일을 CDN 주소로 테마에 추가하건, 파일 자체를 다운로드 받아서 내 테마에 추가하건 파일이 테마에 추가되어있어야한다.

  1. CDN 이용

    2. jsDelivr, cdnjs, UNPKG 중 한 곳에서 CDN 주소를 받아서 사용할 수 있다.

    위 사이트 중 jsDelivr를 선택, 필요한 언어, 플러그인 등을 선택해봤다.

    CND 이용하려니 Functions.php에 추가 해야 할 JS, CSS 파일이 굉장히 많아 지는 것 같다.

  2. 다운로드

    3. Prism 홈페이지에서 js, css 파일들을 다운로드 받을 수 있다.

    Prism 홈페이지에서 js, css 파일 다운로드 받는 방법을 알아보자.

    다운로드 받았다면 웹서버 » wp-content/themes/’테마 이름’ 폴더 내에 업로드한다.

테마에 적용

CDN 이용

내 테마의 functions.php 파일에 아래 코드를 추가한다.

functions.php
wp_enqueue_style( 'prismCSS', get_template_directory_uri() . 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/toolbar/prism-toolbar.min.css' );
wp_enqueue_style( 'prismCSS', get_template_directory_uri() . 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/line-numbers/prism-line-numbers.min.css' );
wp_enqueue_style( 'prismCSS', get_template_directory_uri() . 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/inline-color/prism-inline-color.min.css' );
wp_enqueue_style( 'prismCSS', get_template_directory_uri() . 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/command-line/prism-command-line.min.css' );
wp_enqueue_script( 'prismJS', get_template_directory_uri() . 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js', array(), '1.29.0', true );
wp_enqueue_script( 'prismJS', get_template_directory_uri() . 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-bash.min.js', array(), '1.29.0', true );
wp_enqueue_script( 'prismJS', get_template_directory_uri() . 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-c.min.js', array(), '1.29.0', true );
wp_enqueue_script( 'prismJS', get_template_directory_uri() . 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js', array(), '1.29.0', true );
wp_enqueue_script( 'prismJS', get_template_directory_uri() . 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-cpp.min.js', array(), '1.29.0', true );
wp_enqueue_script( 'prismJS', get_template_directory_uri() . 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-clike.min.js', array(), '1.29.0', true );
wp_enqueue_script( 'prismJS', get_template_directory_uri() . 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-csharp.min.js', array(), '1.29.0', true );
wp_enqueue_script( 'prismJS', get_template_directory_uri() . 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-css.min.js', array(), '1.29.0', true );
wp_enqueue_script( 'prismJS', get_template_directory_uri() . 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-docker.min.js', array(), '1.29.0', true );
wp_enqueue_script( 'prismJS', get_template_directory_uri() . 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-excel-formula.min.js', array(), '1.29.0', true );
wp_enqueue_script( 'prismJS', get_template_directory_uri() . 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-go.min.js', array(), '1.29.0', true );
wp_enqueue_script( 'prismJS', get_template_directory_uri() . 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-java.min.js', array(), '1.29.0', true );
wp_enqueue_script( 'prismJS', get_template_directory_uri() . 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-javascript.min.js', array(), '1.29.0', true );
wp_enqueue_script( 'prismJS', get_template_directory_uri() . 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-json.min.js', array(), '1.29.0', true );
wp_enqueue_script( 'prismJS', get_template_directory_uri() . 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-markdown.min.js', array(), '1.29.0', true );
wp_enqueue_script( 'prismJS', get_template_directory_uri() . 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-markup.min.js', array(), '1.29.0', true );
wp_enqueue_script( 'prismJS', get_template_directory_uri() . 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-nginx.min.js', array(), '1.29.0', true );
wp_enqueue_script( 'prismJS', get_template_directory_uri() . 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-php.min.js', array(), '1.29.0', true );
wp_enqueue_script( 'prismJS', get_template_directory_uri() . 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-powershell.min.js', array(), '1.29.0', true );
wp_enqueue_script( 'prismJS', get_template_directory_uri() . 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-python.min.js', array(), '1.29.0', true );
wp_enqueue_script( 'prismJS', get_template_directory_uri() . 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-scss.min.js', array(), '1.29.0', true );
wp_enqueue_script( 'prismJS', get_template_directory_uri() . 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-shell-session.min.js', array(), '1.29.0', true );
wp_enqueue_script( 'prismJS', get_template_directory_uri() . 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-sass.min.js', array(), '1.29.0', true );
wp_enqueue_script( 'prismJS', get_template_directory_uri() . 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-sql.min.js', array(), '1.29.0', true );
wp_enqueue_script( 'prismJS', get_template_directory_uri() . 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-swift.min.js', array(), '1.29.0', true );
wp_enqueue_script( 'prismJS', get_template_directory_uri() . 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-visual-basic.min.js', array(), '1.29.0', true );
wp_enqueue_script( 'prismJS', get_template_directory_uri() . 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-xml-doc.min.js', array(), '1.29.0', true );
wp_enqueue_script( 'prismJS', get_template_directory_uri() . 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/show-language/prism-show-language.min.js', array(), '1.29.0', true );
wp_enqueue_script( 'prismJS', get_template_directory_uri() . 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/toolbar/prism-toolbar.min.js', array(), '1.29.0', true );
wp_enqueue_script( 'prismJS', get_template_directory_uri() . 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/line-numbers/prism-line-numbers.min.js', array(), '1.29.0', true );
wp_enqueue_script( 'prismJS', get_template_directory_uri() . 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/inline-color/prism-inline-color.min.js', array(), '1.29.0', true );
wp_enqueue_script( 'prismJS', get_template_directory_uri() . 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/download-button/prism-download-button.min.js', array(), '1.29.0', true );
wp_enqueue_script( 'prismJS', get_template_directory_uri() . 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js', array(), '1.29.0', true );
wp_enqueue_script( 'prismJS', get_template_directory_uri() . 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/command-line/prism-command-line.min.js', array(), '1.29.0', true );
wp_enqueue_script( 'prismJS', get_template_directory_uri() . 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js', array(), '1.29.0', true );
PHP

파일 다운로드

내 테마의 functions.php 파일에 아래 코드를 추가한다.

functions.php
wp_enqueue_style( 'prismCSS', get_template_directory_uri() . '/prism.css' );
wp_enqueue_script( 'prismJS', get_template_directory_uri() . '/prism.js', array(), '1.29.0', true );
PHP

구문 강조 사용

포스트에 구문 강조 코드 추가
<pre><code class="language-[alias]">구문 강조 코드 입력</code></pre>
Markup

구문 강조 코드를 넣을 때는 위 코드를 사용해야 하며 [alias] 부분엔 아래 표를 참고하여 사용하고자 하는 언어의 별칭을 입력해야 한다.

별칭은 한 가지만 골라서 작성한다.

예: language-markup, language-js 등…

별칭 확인
Languages Alias
Markup markup, html, xml, svg, mathml, ssml, atom, rss
CSS css
C-like clike
JavaScript javascript, js
Bash bash, sh, shell
C c
C# csharp, cs, dotnet
C++ cpp
Docker dockerdockerfile
Excel Formula excel-formula, xlsx, xls
Go go
Java java
JSON json, webmanifest
Markdown markdown, md
nginx nginx
PHP php
PowerShell powershell
Python python, py
Sass (Sass) sass
Shell session shell-session, sh-session, shellsession
Sass (SCSS) scss
SQL sql
Swift swift
Visual Basic visual-basic, vb, vba
XML doc (.net) xml-doc

마무리

prism.js는 한 줄 한 줄 마우스 가져갔을 때 보여지는 효과(hover effect)를 설정할 수 없다.

참고
START BLOGGING 101 - How to Add Prism.js Syntax Highlighting to Your WordPress Site

Mingg`s Diary
밍구
공부 목적 블로그
모든 포스트 보기

댓글

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

The reCAPTCHA verification period has expired. Please reload the page.

이 사이트는 Akismet을 사용하여 스팸을 줄입니다. 댓글 데이터가 어떻게 처리되는지 알아보세요.

  • « How To – 정보 페이지
  • How To – 헤더 스타일 지정 »