[web] prism.js를 이용하여 코드블럭 스타일링/테마 적용하기

by

코드블럭 스타일 변경하기

AI에게 추천 받은 사이트는 prism. 기존에 알고있던 highlightjs와 비교했을 때 훨씬 가볍다고 해서 바로 적용했다.

그 외 장점들

  • 가볍고 빠름: Highlight.js보다 번들 크기 작음
  • 모듈화: 필요한 언어만 선택 가능
  • 테마 다양: VS Code 스타일 등 50+ 테마
  • 플러그인 불필요: 직접 추가로 성능 최적화

사이트 링크

https://prismjs.com/

내 경우에는 아래 설정으로 적용했다.

https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+bash+c+csharp+cpp+csv+git+json+markdown+markup-templating+php+python+yaml&plugins=line-numbers+toolbar+copy-to-clipboard

이 많은 언어를 다 알고 쓰는 건 아니고 언젠간 조금이라도 쓰겠지라는 생각으로 이것저것 추가했다.

적용 방법

js와 css코드를 받아서 ftp 업로더를 이용해 직접 추가하면 된다. 이건 호스팅 사이트 별로 차이가 있기 때문에 패스.

기본 모양이 다소 투박하기 때문에 스타일css 코드도 변경해주면 좋다.

현재 웹사이트에 적용된 코드블럭 css는 아래와 같다.

/* 인라인 코드 스타일 */
:not(pre) > code {
    background: #fff05c;
    color: #000;
    padding: 3px 5px;
    border-radius: 4px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.85em;
    border: 1px solid #eedd44;
    font-weight: 500;
}

/* 코드 블록 기본 설정 */
pre[class*="language-"] {
    position: relative;
    padding: 40px 20px 20px 20px !important;
    margin: 20px 0;
    border-radius: 8px;
    overflow-x: auto;
}

/* 코드 블록 텍스트 크기 */
pre[class*="language-"] code {
    font-size: 13px !important;
    line-height: 1.6 !important;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
    display: block;
}

/* 언어 라벨 - 왼쪽 상단 작게 */
pre[class*="language-"]::before {
    position: absolute;
    top: 10px;
    left: 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    opacity: 0.5;
    z-index: 1;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* 언어별 색상 */
pre.language-bash::before { content: "bash"; color: #4ade80; }
pre.language-shell::before { content: "shell"; color: #4ade80; }
pre.language-php::before { content: "php"; color: #8b5cf6; }
pre.language-css::before { content: "css"; color: #3b82f6; }
pre.language-javascript::before,
pre.language-js::before { content: "js"; color: #fbbf24; }
pre.language-html::before { content: "html"; color: #f87171; }

/* Copy 버튼 위치 조정 */
div.code-toolbar > .toolbar {
    top: 8px !important;
    right: 12px !important;
}

/* 모바일 최적화 */
@media (max-width: 768px) {
    pre[class*="language-"] {
        padding: 35px 15px 15px 15px !important;
    }
    
    pre[class*="language-"] code {
        font-size: 12px !important;
    }
    
    pre[class*="language-"]::before {
        font-size: 9px;
        top: 8px;
        left: 10px;
    }
}

보다 나은 css 코드가 있다면 지나가지 마시고 알려주세요.

Leave a Comment