Technology

가장 가벼운 코드 하이라이터 라이브러리 Prism.js

0

코드를 강조하여 가독성을 높이고, 다양한 프로그래밍 언어를 시각적으로 구분하기 위해 코드 하이라이터 라이브러리는 필수적인 도구입니다. 그중에서도 Prism.js는 경량의 성능과 사용의 용이성으로 많은 개발자들 사이에서 인기를 끌고 있습니다. 이 글에서는 Prism.js의 주요 특징과 설치 방법, 그리고 React 애플리케이션에서의 활용 방법을 상세히 알아보겠습니다.

Prism.js의 주요 특징

  • 경량성: Prism.js는 기본 라이브러리 크기가 매우 작아 웹 페이지 로딩 속도에 거의 영향을 미치지 않습니다.
  • 확장성: 플러그인 시스템을 통해 기능을 확장할 수 있습니다. 예를 들어, 줄 번호 표시, 코드 복사 버튼 추가 등 다양한 플러그인을 사용할 수 있습니다.
  • 커스터마이징 가능: 다양한 테마를 지원하며, 자신만의 테마를 만들 수도 있습니다.
  • 다양한 언어 지원:@b] 200개 이상의 프로그래밍 언어와 마크업 언어를 지원합니다.
  • 간편한 사용법:@b] 설치와 사용이 매우 간단하며, HTML 파일에 몇 줄의 코드만 추가하면 바로 사용할 수 있습니다.

대표적인 언어 클래스들

Prism.js는 다양한 프로그래밍 언어를 지원하며, 각 언어에 대한 하이라이팅을 적용하기 위해 특정 클래스를 사용합니다. 대표적인 언어 클래스 목록은 다음과 같습니다:

  • HTML: `language-html`
  • CSS: `language-css`
  • JavaScript: `language-javascript`
  • Python: `language-python`
  • Java: `language-java`
  • C++: `language-cpp`
  • Ruby: `language-ruby`
  • PHP: `language-php`
  • SQL: `language-sql`
  • Bash: `language-bash`
  • JSON: `language-json`
  • Markdown: `language-markdown`

이 외에도 Prism.js는 200개 이상의 다양한 언어를 지원하고 있어, 프로젝트에 필요한 언어를 쉽게 추가할 수 있습니다.

Prism.js 설치 및 사용법

Prism.js를 사용하기 위해서는 몇 가지 간단한 설정만으로 충분합니다. 아래의 예시는 HTML 파일에서 Prism.js를 사용하는 방법을 보여줍니다.

1. CSS 및 JS 파일 포함하기

Prism.js의 스타일과 스크립트를 포함합니다.

<!DOCTYPE html>
    <html>
    <head>
      <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism.min.css" rel="stylesheet" />
    </head>
    <body>
      <pre><code class="language-javascript">
      // JavaScript example
      function helloWorld() {
        console.log("Hello, world!");
      }
      </code></pre>
      
      <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>
    </body>
    </html>

2. 언어 클래스 지정

`<code>` 태그에 언어 클래스를 지정하여 문법 강조를 적용합니다. 위 예시에서는 JavaScript 언어 클래스를 사용했습니다.

React 애플리케이션에서 Prism.js 사용하기

Prism.js는 React 애플리케이션에서도 손쉽게 사용할 수 있습니다. React에서 Prism.js를 적용하는 단계는 다음과 같습니다.

1. Prism.js 설치

npm을 사용하여 Prism.js를 설치합니다.

npm install prismjs

2. CSS 파일 가져오기

Prism.js의 CSS 파일을 가져옵니다. 이를 위해 필요한 테마 파일을 import합니다. 예를 들어, `src/index.css` 또는 `src/App.css` 파일에 추가합니다.

/* src/index.css 또는 src/App.css */
    @import 'prismjs/themes/prism.css';

3. Prism.js 사용

코드 블록을 하이라이트하기 위해 React 컴포넌트에서 Prism.js를 사용할 수 있습니다. `useEffect` 훅을 사용하여 컴포넌트가 마운트된 후에 하이라이트를 적용합니다.

// src/App.js
    import React, { useEffect } from 'react';
    import Prism from 'prismjs';
    import 'prismjs/components/prism-jsx'; // JSX 하이라이팅을 위한 모듈
    
    const code = `
    import React from 'react';

    const App = () => {
      return (
        <div>
          <h1>Hello, world!</h1>
        </div>
      );
    };

    export default App;
    `;

    const App = () => {
      useEffect(() => {
        Prism.highlightAll();
      }, []);

      return (
        <div className="App">
          <pre>
            <code className="language-jsx">
              {code}
            </code>
          </pre>
        </div>
      );
    };

    export default App;

이렇게 하면 Prism.js를 사용하여 React 컴포넌트 내에서 코드 하이라이팅을 쉽게 구현할 수 있습니다. `Prism.highlightAll()` 메서드는 DOM의 모든 코드 블록에 하이라이팅을 적용합니다. 코드 블록의 언어를 명시하기 위해 `className` 속성에 적절한 언어 클래스를 지정합니다.

결론

Prism.js는 경량의 성능과 다양한 기능을 갖춘 코드 하이라이터 라이브러리로, HTML, CSS, JavaScript를 비롯한 다양한 프로그래밍 언어를 지원합니다. 설치와 사용이 간단하고, React와 같은 프레임워크에서도 쉽게 적용할 수 있어 많은 개발자들 사이에서 인기를 끌고 있습니다. 코드의 가독성을 높이고, 보다 전문적인 웹사이트를 만들고자 한다면 Prism.js를 적극 추천합니다.

답글 남기기