既定のスタイル

@cosense-toolbox/style は、@cosense-toolbox/parser が生成する HTML に Cosense に近い見た目を適用する CSS です。

Cosense 本体の CSS ではなく、パーサーの出力構造に合わせて作られています。

CSS を読み込むと、.page 以下のタイトル、インデント、コード、表、リンクなどにスタイルが適用されます。

toHtml(page) の出力には .page のルート要素があるため、そのままスタイルが当たります。parseLine など1行だけを描画するときは、自分で .page の要素に包んでください。

Tailwind CSS を使うプロジェクトでは、CSS を直接読み込む代わりに Tailwind CSS のプラグインを使えます。

--cosense-* の CSS 変数を上書きすると、色や文字サイズを調整できます。

Cosense のテーマ変数 (--page-bg など) が使える環境では、それらを fallback として参照します。明示的に --cosense-* を指定すると、その値が優先されます。

すべてのルールは .page 以下に限定されています。ただし、表示対象のページ自身が .page クラスを使う場合は名前が衝突するため、iframe や Shadow DOM で分離するか、パーサーの classNames オプションでクラス名を変えてください。

コードブロックに行番号を付けるには、パーサーの codeLineNumbers() 描画拡張と組み合わせます。詳しくは HTML への変換 をご覧ください。

CSS 変数の一覧は style パッケージの README にあります。