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. 플러그인 시스템

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

Line Numbers: 코드에 줄 번호 표시
Show Language: 코드 블록의 언어 표시
Copy to Clipboard: 코드 복사 버튼 추가
Command Line: 터미널 명령어 강조
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';

문제 해결 가이드

일반적인 오류와 해결 방법

코드가 하이라이팅되지 않는 경우

// DOM이 완전히 로드된 후 실행되도록 보장
document.addEventListener('DOMContentLoaded', () => {
    Prism.highlightAll();
});

스타일 충돌

/* 특정성을 높여 스타일 적용 보장 */
pre[class*="language-"] {
    background: #f5f2f0 !important;
    padding: 1em !important;
}

브라우저 호환성

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

일반적인 문제 해결 방법

콘솔 오류 확인
언어 지원 파일이 올바르게 로드되었는지 확인
CSS 충돌 여부 검사
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'], // 추가 언어 지원
  }
}

주요 설정 옵션

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

장점과 특징

성능
- 지연 로딩 지원
- 최적화된 구문 분석
- 필요한 부분만 포함 가능
확장성
- 커스텀 언어 추가 가능
- 테마 커스터마이징
- 플러그인 시스템
접근성
- 시맨틱 마크업
- 스크린 리더 지원
- 고대비 테마 옵션

정리

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

설치 방법​

NPM을 통한 설치​

CDN을 통한 설치​

주요 특징​

1. 경량성과 속도​

2. 다양한 언어 지원​

3. 테마 시스템​

4. 플러그인 시스템​

실제 구현 예시​

기본 설정​

동적 코드 블록 생성​

성능 최적화​

1. 번들 크기 최적화​

2. 지연 로딩 구현​

3. 선택적 기능 포함​

문제 해결 가이드​

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

브라우저 호환성​

일반적인 문제 해결 방법​

Docusaurus에서의 활용​

주요 설정 옵션​

장점과 특징​

정리​