처음 WordPress를 사용 하면서 투박한 글쓰기에 적지 않게 당황했다.
이전에 Notion으로 블로그용 글을 써왔고, 티스토리에 업로드를 했었는데, 자체 호스팅을 통해서 워드프레스(WordPress)를 처음 접하고는 어떻게 하면 이전에 Notion 에서 쓴 글을 최대한 유사하게 가져올지 고민하고 여러방면에서 검색한 결과 아래과 같은 결과를 얻었다.
Notion Inline Code : 단축어 Ctrl + E
Notion에서 Ctrl + E 단축키를 눌리면 색이 빨간색으로 변하면서 눈에 띄게 강조가 된다.
CSS
/* 본문 내 인라인 코드 스타일 */
.entry-content code {
background-color: rgba(235, 87, 87, 0.07); /* 연한 빨간색 배경 */
color: #eb5757; /* 노션의 빨간색 텍스트 색상 */
padding: 0.2em 0.4em; /* 상하 좌우 여백 */
border-radius: 3px; /* 모서리 둥글게 */
font-size: 0.9em; /* 글자 크기 살짝 조절 */
font-family: inherit; /* 기존 폰트 스타일 유지 */
border: none; /* 테두리 제거 */
}코드블럭 플러그인 설치 Code Block Pro
Inline Code과 별도로 code block – 또한 기본 형태가 너무 투박해서 플러그인 설치를 및 Wrapup 설정을 권장 한다.
PHP
<?php
/**
* Plugin Name: Code Block Pro
* Description: Code highlighting powered by the VS Code engine
* Plugin URI: https://code-block-pro.com
* Author: Kevin Batdorf
* Author URI: https://code-block-pro.com
* Requires at least: 6.0
* Requires PHP: 7.0
* Version: 1.27.7
* License: GPL-2.0-or-later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
* Text Domain: code-block-pro
*
* @package kevinbatdorf
*/
defined('ABSPATH') or die;
// 1. 기존 블록 등록 및 스크립트 설정
add_action('init', function () {
register_block_type(__DIR__ . '/build');
wp_set_script_translations('kevinbatdorf/code-block-pro', 'code-block-pro');
wp_add_inline_script('kevinbatdorf-code-block-pro-view-script', 'window.codeBlockPro = ' . wp_json_encode([
'pluginUrl' => esc_url_raw(plugin_dir_url(__FILE__)),
]) . ';');
});
add_action('admin_init', function () {
wp_add_inline_script('kevinbatdorf-code-block-pro-editor-script', 'window.codeBlockPro = ' . wp_json_encode([
'pluginUrl' => esc_url_raw(plugin_dir_url(__FILE__)),
]) . ';');
});
// 2. 추가된 부분: 줄 바꿈(Wrap) 기능을 위한 인라인 CSS 주입
add_action('wp_head', function () {
?>
<style>
/* Code Block Pro 줄 바꿈 강제 적용 */
div.wp-block-kevinbatdorf-code-block-pro:not(.code-block-pro-editor) pre code {
white-space: pre-wrap !important; /* 줄 바꿈 활성화 */
word-break: break-all !important; /* 긴 단어도 끊어서 다음 줄로 */
overflow-wrap: anywhere !important; /* 레이아웃 깨짐 방지 */
}
/* 줄 번호가 있을 때 줄 간격을 맞추기 위한 보정 */
.cbp-has-line-numbers pre code .line {
display: flex !important;
position: static !important;
}
</style>
<?php
});
// 3. 기존 파일 포함
include_once(__DIR__ . '/php/compatibility.php');
include_once(__DIR__ . '/php/router.php');
include_once(__DIR__ . '/php/routes.php');