가볍고 빠른 워드프레스 코드 하이라이터(SCB) 플러그인

Syntax-highlighting Code Block

오늘은 워드프레스 코드 하이라이터에 대해 한번 알아봅니다. Syntax-highlighting Code Block이라는 하이라이터 입니다. 워드프레스를 시작하면서 몇가지 소스코드 하이라터를 이용해 봤는데 저에게는 이게 제일 맘에 듭니다.

실행된 기본 화면입니다. 자바스크립트 이고요. 좀 많이 심플합니다. 하지만 스타일을 변경하면 좀 더 다양하고 화려한 모습을 볼 수 있습니다.

이 하이라이터는 워드프레스 기본편집기인 구텐베르그의 코드블럭을 그대로 사용하여 코드를 입력합니다. 입력할때는 텍스트형태로 보이지만 미리보기나 글을 발행하고 나면 하이라이팅이 됩니다.

스타일 설정

위에서 본 테마들과 같이 화려한 테마로 설정하기 위해서는 child 테마를 만들고 child 테마의 functions.php에 add_filter을 해줘야 합니다. 이부분이 다른 플러그인에 비해 약간 귀찮습니다. 테마의 종류를 확인해 보시려면 데모페이지를 보시면 됩니다.

add_filter(
     'syntax_highlighting_code_block_style',
     function() {
         return 'school-book';
     }
 );
Code language: JavaScript (javascript)

위에서 코드에서 보면 return ‘school-book’; 이부분에서 자신의 테마로 바꿔주면된다. 테마이름은 위의 “테마데모페이지” 버튼을 클릭하면 쭉~ 리스트가 나열되어 있다. 조심해야할 것은 테마이름의 공백은 “-“로 바꿔써야 적용이된다.

예를들어 테마이름이 Monokai Sublime 라고 하면 return ‘monokai-sublime’;로 적어야 한다는 것이다.

참고로 2021년 1월 오늘 현재 이 워드프레스의 차일드테마 functions.php 내용은 다음과 같이 적용되어 있다.

<?php
function oceanwp_enqueue_styles() {
    $parent_style = 'parent-style';
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
    get_stylesheet_directory_uri() . '/style.css',
    array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'oceanwp_enqueue_styles' );

// 코드하이라이터 테마설정 https://highlightjs.org/static/demo/
add_filter(
    'syntax_highlighting_code_block_style',
    function() {
        //return 'school-book';
        return 'monokai-sublime';
    }
);
?>
Code language: PHP (php)

코드 하이라이터에 사용가능한 프로그램 언어는 충분할 정도로 많습니다. 이 플러그인의 장점은 서버사이드에서 동작하기 때문에 좀 더 빠르고, 자바스크립트로 구현되지 않았기 때문에 특정 테마와의 충돌문제도 회피할 수 있습니다.

그래서 최근에 이 하이라이터를 이용하고 있습니다. 이상으로 마치겠습니다. 감사합니다. nscworld.net.