WordPwressで10行ショートコード：コード枠を簡単出力
概要
記事中に貼るソースコードを[codebox]...[/codebox]で綺麗に表示。等幅フォント・余白・角丸だけの軽量な表現で、「開発記事っぽさ」を一瞬で出せます。ハイライトはテーマやプラグインに委ねられる構成。
ショートコード実装（functions.php）
PHP
// 簡易コード枠ショートコード [codebox lang="js"]console.log('hi')[/codebox]
add_shortcode('codebox', function($atts, $content = '') {
$a = shortcode_atts(['lang' => ''], $atts);
$lang = esc_attr($a['lang']);
$code = esc_html(trim($content));
ob_start(); ?>
<pre class="codebox"><code<?php if ($lang) echo ' class="language-' . $lang . '"'; ?>><?php echo $code; ?></code></pre>
<?php return ob_get_clean();
});最小スタイル（外観 → カスタマイズ → 追加CSS）
CSS
.codebox {
background: #fafafa;
border: 1px solid #eee;
border-radius: 8px;
padding: 16px;
overflow: auto;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.95rem;
line-height: 1.7;
}使い方
CSS
[codebox lang="css"]
.button { padding: 8px 12px; border-radius: 6px; }
[/codebox]解説
・esc_htmlでXSS対策。
・language-xxxクラスはPrism.js等のハイライターと相性良。
・まずは読みやすさを優先、色付けは後からでもOK。
