# コードブロック

コード例を書き、言語を指定します。

import ContentEditor from '@/components/editor/ContentEditor.astro';

## コード例を書く

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

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

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

<ContentEditor content="code-block" />

````markdown
```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](/docs/ja/editor/markdown/mermaid/) をご覧ください。