[ReactJS] highlight.js 커스텀 language 추가

커스텀 language를 추가하기 전에 code highlight 설정부터 해야한다.

 

2024.08.24 - [프로그래밍/Javascript] - [ReactJS] code highlight editor (feat. highlight.js)

[ReactJS] code highlight editor (feat. highlight.js)

 

 

---

1. 기존의 언어 추가

먼저 highlight.js를 보면 기존의 language들이 있다. 

 

 

예를 들어 c언어를 추가하고 싶다면 아래와 같이 c언어의 라이브러리를 불러와 언어를 등록해 주면 된다

import hljs from 'highlight.js';
import cLang from 'highlight.js/lib/languages/c';
import 'highlight.js/styles/docco.min.css';
hljs.registerLanguage('language-c', cLang);

 

 

2. 새로운 언어 추가

새로운 언어에 대한 파일을 만든 뒤 아래와 같이 작성.

(나는 p라는 언어가 있다고 가정하고 p.js로 작성)

export default function(hljs) {
    return {
        name: 'PLanguage',
        keywords: {
            keyword: ["IF", "ELSE", "FUNCTION", "WHILE"],
            built_in: ["PRINT"],
            literal: ["true", "false", "null"],
        },
        contains: [
            hljs.C_LINE_COMMENT_MODE,
            {
              className: 'string',
              begin: '"', end: '"'
            },
            {
              className: 'number',
              begin: '\\b\\d+(\\.\\d+)?'
            }
        ]
    };
}

 

p.js 에서 작성한 keyword, built_in, literal, string, number에 대한 p.css 추가

.hljs-keyword {
    color: #0077ff;
    font-weight: bold;
}

.hljs-built_in {
    color: #ff8800;
}

.hljs-literal {
    color: #008800;
}

.hljs-number {
    color: red;
}

.hljs-string {
    color:burlywood;
}

 

언어 추가

import hljs from 'highlight.js';
import PLanguage from "./p.js";
import "./p.css";

hljs.registerLanguage("language-p", PLanguage);

.......................................

<code ref={codeRef} className={`language-p`} />

 

3. 결과