CSS 클래스 추가 블록 옵션으로 구텐베르크 에디터에서 Prism Syntax Highlighter 플러그인 사용

워드프레스 5.0 버전에서 구텐베르크 에디터가 기본 에디터로 설정되면서 사용하던 플러그인을 클래식 에디터(TinyMce Editor)에서 사용할 수 없는 때가 있습니다. 여러 플러그인이 해당할 수 있으나 ‘코드하이라이터’ 적용을 돕는 Prism For WP(Prism Syntax Highlighter) 플러그인도 그중 하나입니다.

다음 그림은 클래식 에디터의 Prism Syntax Highlighter 플러그인 아이콘으로, 구텐베르크 에디터에서는 나오지 않습니다.

클래식 에디터의 Prism Syntax Highlighter 플러그인 아이콘
클래식 에디터의 Prism Syntax Highlighter 플러그인 아이콘

구텐베르크 에디터의 코드 블록

Prism Syntax Highlighter 플러그인을 사용하고 있을 때 구텐베르크 에디터에서 다음의 PHP 코드(A)를 추가한다고 가정합니다.

public function get_upgrade_messages() {
	return $this->messages;
}

이때 구텐베르크 에디터의 블록은 다음 그림의 코드 블록을 선택한 후 코드를 추가하면 됩니다.

구텐베르크 에디터 코드 블록
구텐베르크 에디터 코드 블록

그림으로 따로 안내하지는 않지만, Prism Syntax Highlighter 플러그인의 스타일이 적용되지 않은 상태로 출력될 것입니다.

구텐베르크 에디터 코드 블록의 CSS 클래스 추가

이때 플러그인의 스타일을 적용하려면 코드 블록을 선택한 후 오른쪽에 나오는 고급 메타박스의 추가 CSS 클래스에 플러그인에서 사용하는 language-php 클래스를 추가하면 됩니다. PHP 코드 기준입니다.

Prism Syntax Highlighter 플러그인의 PHP 스타일 클래스 추가
Prism Syntax Highlighter 플러그인의 PHP 스타일 클래스 추가

결과는 앞에 출력한 PHP 코드 A처럼 나옵니다. 줄 번호를 추가하려면 다음 그림처럼 line-numbers 클래스를 추가하면 됩니다.

Prism Syntax Highlighter 플러그인의 줄 번호 클래스 추가
Prism Syntax Highlighter 플러그인의 줄 번호 클래스 추가

최종 결과는 다음과 같습니다.

public function get_upgrade_messages() {
	return $this->messages;
}

자바스크립트, CSS 등 많은 프로그래밍 언어의 코드를 Prism syntax highlighter 기준 클래스를 사용하여 표현할 수 있습니다.

플러그인 대신 직접 스크립트 추가할 때

앞의 방식이라면 플러그인 설치할 필요가 없다고 생각할 수 있는데, 플러그인을 설치하지 않는다면 관련 스크립트를 워드프레스 방식으로 대기열에 등록하여 워드프레스 구텐베르크 에디터보다 나중에 로드하도록 정의하여야 합니다.

확인하지는 않았지만, 구텐베르크 스타일과 스크립트가 플러그인보다 먼저 로드, 반대로 말하면 플러그인 스타일과 스크립트가 구텐베르크 스타일보다 나중에 로드하므로 원하는 출력 결과를 얻을 수 있다고 볼 수 있습니다. 만약, 직접 스크립트 등을 추가할 때 원하는 결과가 나오지 않는다면 이 부분을 확인해보세요.

그러나, 클래식 에디터를 사용할 때 코드하이라이터 적용은 플러그인을 사용하는 게 더 효율적이며, 출력 결과에 오류가 없는 것처럼 구텐베르크 에디터에 대응하지 않는 플러그인이지만, 코드하이라이터를 적용하고 싶다면 이 글 작성 시점에서는 아직 플러그인 사용이 더 좋겠습니다.

구텐베르크의 코드 블록은 클래식 에디터보다 조금 더 개선되고 코드 추가에서 편리하므로 하이라이터 적용이 필요하지 않다면 그대로 써도 충분합니다.