Kitchen sink

このページは cosense-site-kit / theme-default が対応しているすべての記法と表示をひとつのページで確認するためのものです。

見出し / Headings

見出しは Cosense の [* …] 数で h2 / h3 / h4 に展開されます。[* x] は強調（太字）です。

これは h2 相当（星4つ）

これは h3 相当（星3つ）

これは h4 相当（星2つ）

段落の中で 星1つ と書くと太字になりますが、見出しにはなりません。

インライン記法 / Inline

プレーンなテキスト、太字、斜体、~~取り消し線~~、それから インラインコード と数式 $E = mc^2$ が混在できます。

絶対 URL の外部リンク: Astro

URL ラベル省略形: https://example.com

内部ページリンク (存在する): Quick start

内部ページリンク (存在しない): このページは多分ない

アイコン記法:

タグ / Tags

通常タグは末尾のフッタとヘッダにチップで出ます: #demo #post #framework

名前空間付きタグ（template/foo, slug/foo）は灰色の meta チップでリンクなし: #template/page #slug/kitchen-sink

公開制御タグ（publish, draft, private, internal）は完全に非表示: #publish #draft

リスト / Lists

第1階層: 行頭スペース1つ
- 第2階層: 行頭スペース2つ
  - 第3階層: 行頭スペース3つ
    - 第4階層: 行頭スペース4つ
リストの中に太字、斜体、code、Architecture へのリンクなどを置けます。

ネストした箇条書き / Nested bullets

行頭スペースの数で階層が決まり、連続する項目は1つのリストにまとまります。

第1階層
- 第2階層
- 第2階層（兄弟）
  - 第3階層
第1階層に戻る

番号付きリスト / Ordered list

行頭に「1.」「2.」と書くと順序付きリスト（<ol>）になります。番号はサイト側で自動採番されます。

最初のステップ
次のステップ
最後のステップ

ネストもできます（行頭にスペースを足す）:

親の手順
1. 子の手順 A
2. 子の手順 B
親の手順その2

段落間の改行 / Paragraphs

段落の間に空行を入れると別段落になります。

これは2つ目の段落。インラインコード npm install を含む。

引用 / Blockquote

行頭に「>」を付けると引用ブロックになります。連続した行は1つの引用にまとまります。

我思う、ゆえに我あり。
── デカルト

引用の中でも太字や斜体、コード が使えます:

これは重要な一文です。
引用の中のコード

コードブロック / Code blocks

言語推定はファイル拡張子から行われます（ts / tsx / js / py / rb / go / rs / sh / md / yaml / html / css など）。コードブロック右上にコピー、左上に言語ラベルが出ます。

export function greet(name: string): string {
  return `Hello, ${name}!`;
}

npm create cosense-site my-site \
  --title "My Site" \
  --project "your-public-cosense-project" \
  --yes

title: My Site
url: https://example.com
nav:
  - { label: Home, href: / }
  - { label: Blog, href: /blog }

拡張子なしのコードブロック。シンタックスハイライトは付かないが、
等幅フォントとコピー UI は維持される。

テーブル / Tables

table:Title のあと、行頭タブ区切りで列を並べます。

Supported syntax
Syntax	Cosense	HTML
太字	text	<strong>
斜体	text	<em>
取り消し	~~text~~	<s>
コード	`text`	<code>
数式	$x$	<code class=formula>

画像 / Images

行に画像URLだけを置くと img として展開されます（Gyazo の URL も同様）。

インライン画像 / Inline image

画像を「文章と同じ行」に置くと、文中に収まるインライン画像になります（アイコン的な使い方）。

ここに小さな画像を挟むと文中に表示されます。Cosense上ではちょっと大きいかも．

画像だけを単独の行に置くと、これまで通り大きなブロック画像になります:

外部リンク埋め込み / Embeds

非画像のURLを単独行に置くと target="_blank" のリンクとして展開されます。

https://github.com/shinyaoguri/cosense-site-kit

YouTube埋め込み

メタデータ系の Cosense 記法

Cosense 側のメタ（template, slug）は code:site.yaml などとともに本文からは隠されます。

TOC / 目次

このページのように h2/h3 が複数あるとサイト右側に Notion 風のホバー TOC が出ます（ビューポート幅 900px 以上）。

Backlinks / 被リンク

ページ末尾には、このページにリンクしている他のページの一覧が自動で出ます。[Kitchen sink] を他のページに書いておくと、ここに逆引きで表示されます。

おまけ: OGカード画像

このページ最初の画像が、SNS共有時の OG / Twitter カード画像に自動採用されます。1枚置いておくと共有時の見栄えが良くなります。

コレクション機能

ページ内の最初の YAML コードブロックを、セクションごとのリストページとして描画します。

→Collection template

追加のインライン装飾 / More decorations

二重ブラケットの強調: これも太字

複合装飾: 太字かつ斜体、~~太字かつ取り消し~~、~~斜体かつ取り消し~~

対応外の装飾はプレーンテキストに劣化します（例: 下線アンダーラインは装飾なしで表示）。

見出しに Quick start リンクを含む例

見出し（[*** …]）の中にはリンクなどのインライン要素を置けます（バッククォートのコードは装飾ブラケットを壊すため見出し内では使えません）。

Helpfeel / コマンドライン記法

行頭「? 」の Helpfeel 記法はインラインコードとして表示されます:

? このサイトをデプロイするには

コマンドライン記法（$ / %）もインラインコード扱いです:

$ npm run build

% ls -la

リンクのバリエーション / Link variants

他プロジェクトのページへのリンク（root link）: /help-jp/ブラケティング

他プロジェクトのトップへのリンク: /help-jp

Google Map 記法は地図へのリンクになります:

アイコンのバリエーション / Icon variants

二重ブラケットの強調アイコン:

他プロジェクトのアイコン:

文中にを置いても改行されず、インラインで表示されます。

画像のバリエーション / Image variants

リンク付き画像（クリックでリンク先へ飛ぶ）:

二重ブラケットの強調画像（単独行ではブロック画像）:

数式のバリエーション / Math

インライン数式: $\frac{1}{N}\sum_{i=1}^{N} x_i$ を文中に。

単独行の数式（段落として表示されます）:

\int_0^\infty e^{-x^2}\,dx = \frac{\sqrt{\pi}}{2}

引用のバリエーション / Rich quotes

引用の中に Quick start リンクと数式 $e^{i\pi}+1=0$ も置けます。

テーブルのバリエーション / Rich table cells

セルにはページリンク・外部リンク・複合装飾も置けます:

Rich cells
種類	例
ページリンク	Quick start
外部リンク	Astro

埋め込みのバリエーション / More embeds

Vimeo の URL を単独行に置くとプレイヤーになります:

Spotify はトラック・アルバム・プレイリスト・ポッドキャストに対応:

アーティスト表示

アルバム表示

Markdown について

本フレームワークは Cosense (Scrapbox) 記法専用です。Markdown はパースされず、そのまま表示されます: **アスタリスク強調は効きません**

終わり

以上が theme-default で対応しているすべての見た目です。表示が崩れていればテーマ側のバグ、抜けている記法があれば parser 側の追従漏れです。

template/page で template を上書き可能

slug/custom-slug でスラッグを上書き可能

#kitchen-sink #demo