티스토리에 highlight.js 적용해보기

코드의 가독성을 높이기 위해, highlight.js를 이용하여 코드 강조 및 라인 수 활성화 기능을 설정한다

 

기본 플러그인 비활성화

티스토리 사이트 설정의 플러그인에서 코드 문법 강조를 비활성화한다 (스타일 충돌 방지)

 

highlight 데모 살펴보기

아래의 링크로 접속한 뒤, 맘에 드는 컬러 테마를 선택한다.

highlight.js demo

 

폰트 정하기

아래의 링크로 접속한 뒤, 코드 스타일에 적용할 폰트를 탐색해본다 (Ubuntu mono, IBM Plex Mono, Nanum Gothic Coding 추천) 

Google Fonts

폰트를 결정한 이후에, 해당 폰트의 CDN 주소를 확보한다

 

사이트 설정

티스토리 설정에서 꾸미기 > 스킨 편집을 클릭한다

html 편집 버튼을 클릭해서, html 편집 화면으로 진입한다

HTML 메뉴에서 </head> 앞에 다음의 코드를 추가한다 아래의 코드의 테마는 Night Owl, 폰트는 IBM Plex Mono로 선택하였는데, 필요에 따라 값을 변경하여 적용해야 한다

<link rel="stylesheet"
    href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/night-owl.min.css">
<script defer src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

<script defer src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
<script>hljs.initLineNumbersOnLoad();</script>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap" rel="stylesheet">

CSS  메뉴에서 다음의 코드를 추가한다

pre > code > table > tbody > tr > td ,
pre > code {
    font-family: 'IBM Plex Mono' !important; 
    font-size: 17px !important;
}

.hljs-ln-numbers {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    text-align: center;
    color: #ccc;
    border-right: 1px solid rgba(204, 204, 204, 0);
    vertical-align: top;
    padding-right: 5px;
}

.hljs-ln-code {
    padding-left: 10px;
    color: rgba(255, 255, 255, 0.808);
}

.hljs-ln-n{margin-right: 10px;}

적용 버튼을 클릭하여 저장한다

 

코드 테스트

아래와 같이 적절한 코드를 작성하여, 코드가 제대로 렌더링되는지 확인해본다

#include <iostream>
#include "opencv2/opencv.hpp"

using namespace cv;
using namespace std;

int main()
{
    cout << "Hello OpenCV " << CV_VERSION << std::endl;
    Mat img = imread("lenna.bmp");

    if (img.empty()) {
        cerr << "Image load failed!" << endl;
        return -1;
    }

    namedWindow("image");
    imshow("image", img);
    waitKey();
    destroyAllWindows();

}

 

참고

Getting highlight.js

GitHub - wcoder/highlightjs-line-numbers.js: Line numbering plugin for Highlight.js