コードブロック

コード例を書く

/ メニューからコードブロックを挿入し、中のコードを編集します。言語の操作欄で種類を指定してください。コードブロック内は文章ではなく、コードとして編集されます。

ビジュアルモードで編集する

コードブロックを編集してから、ソースで言語とメタデータを確認します。

code-block.md

StarlightFumadocsProseflyGeneric

ビジュアルソース

サンプルをリセット

エディターを読み込み中…

編集できるサンプルです。変更はこのページ内にのみ保持されます。

```javascript title="src/editor.ts" frame="code" {1}
const title = 'はじめに';
console.log(title);
```

コードのメタデータ

Starlight と Prosefly は title、frame、ハイライト行などの Expressive Code メタデータを使います。Fumadocs は lineNumbers、tab、tab-group など独自のメタデータ構文を使います。Generic は通常の Markdown コードフェンスを保持し、profile 固有のメタデータはソースで編集できます。

Prosefly はコード例を実行しません。構文の強調表示やコードの変換は、サイトのビルドが行います。図のコードブロックは Mermaid をご覧ください。