`wa-not-prose` クラスをコード例プレビューに追加

コード例プレビューに wa-not-prose を付与し、デフォルトで prose スタイリングが適用されないようにしました。必要に応じて wa-prose ラッパーを付与すれば prose 表示が可能です。

背景

コード例プレビューは <div class="code-example-preview"> だけで構成され、ページ全体の prose ユーティリティのスタイルが継承されていました。その結果、コード例内部のテキストが余計な余白やフォントスタイルで表示され、実装例としての可読性が低下していました。

この PR の目的は、プレビュー領域から prose スタイルを除外し、コード例の見た目を一貫させることです。wa-not-prose をデフォルトで付与することで、ドキュメント執筆時に余計なクラス付与を行う必要がなくなります。

技術的な変更

packages/webawesome/docs/_transformers/code-examples.js の codeExamplesTransformer が生成する HTML を修正し、プレビュー用 <div> に wa-not-prose を追加しました。

変更前:

<div class="code-example-preview">
  <div>
    ${preview}
  </div>
</div>

変更後:

<div class="code-example-preview wa-not-prose">
  <div>
    ${preview}
  </div>
</div>

この変更は CSS クラスの追加のみであり、既存の機能やビルドプロセスに影響を与えません。wa-not-prose が適用されたプレビューは、ページ全体の prose スタイルを継承しないため、コード例のレイアウトが純粋にコード表示に特化します。

設計判断

デフォルトで prose スタイルを除外する方針は、コード例の UI 一貫性を保つ上で合理的です。代替案としては利用者側で手動で wa-not-prose を付与するか、別のラッパー要素を導入することが考えられましたが、いずれも執筆時の手間増加につながります。ビルド時に自動的にクラスを付与するアプローチは、後方互換性を保ちつつ開発者体験を損なわない選択です。

まとめ

wa-not-prose クラスの導入により、コード例プレビューが prose スタイルから独立し、必要に応じて wa-prose を明示的に付与できるようになりました。これにより、ドキュメントの可読性と UI の一貫性が向上します。