Skip to main content

Prism.js란?

작성일 : 2025.01.10

Prism.js는 웹페이지에서 코드 구문을 강조(Syntax Highlighting)해주는 가벼운 JavaScript 라이브러리입니다. 2012년에 Lea Verou가 만들었으며, 다양한 프로그래밍 언어를 지원하고 확장 가능한 플러그인 시스템을 제공합니다.

설치 방법​

NPM을 통한 설치​

npm install prismjs

CDN을 통한 설치​

<!-- 코어 CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet" />

<!-- 선택한 테마 (예: Okaidia) -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css" rel="stylesheet" />

<!-- 코어 JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>

<!-- 필요한 언어 (예: Python) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>

주요 특징​

1. 경량성과 속도​

  • 최소 2KB로 시작하는 가벼운 코어
  • 필요한 언어와 플러그인만 선택적으로 포함 가능
  • 빠른 구문 분석과 렌더링 속도

2. 다양한 언어 지원​

// JavaScript
function hello() {
  console.log("Hello World!");
}

# Python
def hello():
    print("Hello World!")

// Java
public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello World!");
    }
}

3. 테마 시스템​

Prism은 다양한 내장 테마를 제공합니다:

  • Default
  • Dark
  • Funky
  • Okaidia
  • Twilight
  • Coy
  • Solarized Light
  • Tomorrow Night

각 테마는 다른 색상 구성과 스타일을 가지고 있어, 웹사이트의 디자인에 맞게 선택할 수 있습니다.

4. 플러그인 시스템​

추가 기능을 제공하는 다양한 플러그인:

  1. Line Numbers: 코드에 줄 번호 표시
  2. Show Language: 코드 블록의 언어 표시
  3. Copy to Clipboard: 코드 복사 버튼 추가
  4. Command Line: 터미널 명령어 강조
  5. Diff Highlight: 코드 변경사항 하이라이트

실제 구현 예시​

기본 설정​

// Prism.js 초기화 및 설정
Prism.manual = true; // 수동 하이라이팅 모드 활성화

// 복사 버튼 플러그인 설정
Prism.plugins.toolbar.registerButton('copy-to-clipboard', {
    text: 'Copy',
    onClick: function (env) {
        const code = env.element.textContent;
        navigator.clipboard.writeText(code).then(() => {
            console.log('코드가 클립보드에 복사되었습니다.');
        }).catch(err => {
            console.error('복사 중 오류가 발생했습니다:', err);
        });
    }
});

// 커스텀 언어 정의
Prism.languages.customLang = {
    'comment': /\/\/.*/,
    'string': /"(?:\\.|[^\\"])*"/,
    'keyword': /\b(?:if|else|while|for|return|function)\b/,
    'boolean': /\b(?:true|false)\b/,
    'number': /\b\d+\b/,
    'operator': /[-+*/=<>!]+/,
    'punctuation': /[.,;(){}[\]]/
};

// 동적으로 추가된 코드에 하이라이팅 적용
function highlightCode() {
    Prism.highlightAll();
}

동적 코드 블록 생성​

function createCodeBlock(code, language) {
    const pre = document.createElement('pre');
    const code_elem = document.createElement('code');
    
    code_elem.className = `language-${language}`;
    code_elem.textContent = code;
    
    pre.appendChild(code_elem);
    document.body.appendChild(pre);
    
    Prism.highlightElement(code_elem);
}

성능 최적화​

1. 번들 크기 최적화​

// webpack.config.js
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    optimization: {
        splitChunks: {
            chunks: 'all',
            minSize: 20000,
            maxSize: 70000,
        }
    }
}

2. 지연 로딩 구현​

// 필요한 시점에 언어 파일 동적 로드
async function loadLanguage(language) {
    try {
        await import(`prismjs/components/prism-${language}`);
        console.log(`${language} 지원이 로드되었습니다.`);
    } catch (error) {
        console.error(`${language} 로드 중 오류:`, error);
    }
}

3. 선택적 기능 포함​

// 필요한 플러그인만 포함
import 'prismjs/plugins/line-numbers/prism-line-numbers';
import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard';

문제 해결 가이드​

일반적인 오류와 해결 방법​

  1. 코드가 하이라이팅되지 않는 경우
// DOM이 완전히 로드된 후 실행되도록 보장
document.addEventListener('DOMContentLoaded', () => {
    Prism.highlightAll();
});
  1. 스타일 충돌
/* 특정성을 높여 스타일 적용 보장 */
pre[class*="language-"] {
    background: #f5f2f0 !important;
    padding: 1em !important;
}

브라우저 호환성​

  • IE11 이상 지원
  • 모던 브라우저(Chrome, Firefox, Safari, Edge)에서 모든 기능 정상 작동
  • IE11에서는 일부 최신 문법 하이라이팅이 제한될 수 있음

일반적인 문제 해결 방법​

  1. 콘솔 오류 확인
  2. 언어 지원 파일이 올바르게 로드되었는지 확인
  3. CSS 충돌 여부 검사
  4. Prism.js 버전 호환성 체크

Docusaurus에서의 활용​

Docusaurus는 prism-react-renderer를 사용하여 Prism.js를 통합합니다.

// docusaurus.config.js
themeConfig: {
  prism: {
    theme: prismThemes.github,    // 라이트 모드 테마
    darkTheme: prismThemes.dracula, // 다크 모드 테마
    defaultLanguage: 'javascript', // 기본 언어 설정
    additionalLanguages: ['java', 'python'], // 추가 언어 지원
  }
}

주요 설정 옵션​

  1. theme: 기본 테마 설정
  2. darkTheme: 다크 모드용 테마
  3. defaultLanguage: 언어가 지정되지 않은 코드 블록의 기본 언어
  4. additionalLanguages: 추가로 지원할 언어들

장점과 특징​

  1. 성능

    • 지연 로딩 지원
    • 최적화된 구문 분석
    • 필요한 부분만 포함 가능

  2. 확장성

    • 커스텀 언어 추가 가능
    • 테마 커스터마이징
    • 플러그인 시스템

  3. 접근성

    • 시맨틱 마크업
    • 스크린 리더 지원
    • 고대비 테마 옵션

정리​

Prism.js는 웹에서 코드를 보여주기 위한 강력하고 유연한 도구입니다. 설치가 간단하고, 필요한 기능만 선택적으로 포함할 수 있어 최적화된 구현이 가능합니다. Docusaurus와 같은 문서화 도구에서 기본으로 채택할 만큼 신뢰성이 있으며, 다양한 확장 기능과 플러그인을 통해 원하는 기능을 추가할 수 있습니다. 성능 최적화와 문제 해결에 대한 이해를 바탕으로 효율적인 구현이 가능합니다.