> [!tip] 試してみる
> Callout は `[!type]` マーカー付きの block quote です。
> `[!info]`、`[!warning]`、`[!question]` も同じように表示されます。

[[README]] と [[plugins/README|Plugin catalog]] への WikiLink。

```ts title="hello.ts"
export function hello(name: string): string {
  return `こんにちは、${name}`;
}
```

export function hello(name: string): string {
  return `こんにちは、${name}`;
}

```ts tab="React"
const greeting = "Hello from React";
```
 
```js tab="Vanilla"
console.log("Hello from JavaScript");
```

```js {2}
const first = 1;
const second = 2;
const third = 3;
```
 
```js
const kept = true;
const added = "new line"; // [!code ++]
const removed = false; // [!code --]
```
 
```js
const focused = 1; // [!code focus]
const plain = 2;
```

この文は ==強調== され、ほかはそのまま表示されます。

本文中で補足を参照します。[^1]
 
[^1]: ここが sidenote の本文です。

::badge[Stable]{variant=success}
 
::kbd[Ctrl+Shift+P]
 
:::note[補足]
本文をそのまま書けます。
:::

```mermaid
flowchart LR
  A[Note] --> B{Published?}
  B -->|yes| C[Site]
  B -->|no| D[Draft]
```

```d2
site: Riebeckite
content -> build -> deploy
```

```dot
digraph G {
  notes -> pages;
  pages -> html;
}
```

```chart
{
  "type": "bar",
  "data": {
    "labels": ["Mon", "Tue", "Wed"],
    "datasets": [{ "label": "Visits", "data": [12, 19, 8] }]
  }
}
```

```vega-lite
{
  "title": "Revenue",
  "data": { "values": [{ "category": "A", "value": 28 }, { "category": "B", "value": 55 }] },
  "mark": "bar",
  "encoding": {
    "x": { "field": "category", "type": "nominal" },
    "y": { "field": "value", "type": "quantitative" }
  }
}
```

```wavedrom
{ "signal": [
  { "name": "clk", "wave": "p......" },
  { "name": "bus", "wave": "x.34.5x", "data": "head body tail" }
] }
```

```markmap
# Project
 
## Design
 
### Notation
### Rendering
 
## Delivery
```

```marp title="Intro deck"
# First slide
 
- a bullet
 
---
 
# Second slide
```

```map
center: 35.6812, 139.7671
zoom: 13
label: Tokyo Station
markers:
  - 35.6812, 139.7671 | Tokyo Station
  - 35.6586, 139.7454 | Tokyo Tower
```

```qr
# caption: Project page
https://example.com/
```

```plantuml
@startuml
Alice -> Bob: Hello
Bob --> Alice: Hi
@enduml
```

```canvas
{
  "nodes": [
    { "id": "note", "type": "text", "x": 0, "y": 0, "width": 240, "height": 100, "text": "Note" }
  ],
  "edges": []
}
```

```embed
https://www.youtube.com/watch?v=dQw4w9WgXcQ
title: Demo video
caption: A short caption
aspect: 16/9
```

```gallery
columns: 3
items:
  - title: Default
    description: A clean, typographic theme.
    href: https://riebeckite.dev/docs/themes/default
  - title: Minimal
    description: Stripped back to the essentials.
    href: https://riebeckite.dev/docs/themes/minimal
  - title: Gruvbox
    description: A warm, high-contrast palette.
    href: https://riebeckite.dev/docs/themes/gruvbox
```

![[HW]]

![[riebeckite-logo-horizontal.png]]

```cardlink
url: https://example.com/riebeckite
title: Riebeckite
description: Markdown から静的サイトを作るツール
host: example.com
```

```dataview
TABLE file.name AS "Name", status
FROM #project
WHERE status = "active"
SORT file.name asc
LIMIT 10
```

```query
sort:
  field: title
  order: asc
limit: 5
```

```base
filters:
  and:
    - file.hasTag("featured")
properties:
  file.name:
    displayName: Title
views:
  - type: table
    name: Featured
    limit: 10
```

## Backlog
 
- [ ] Draft the release notes
- [ ] Link to [[README]]
 
## Done
 
- [x] Publish the fixture

```flashcards
Riebeckite とは？ :: Markdown から静的サイトを作るツール
 
公開の単位は？ :: Note
```

```excalibrain
```