開発者向けのヘッドレスCMSを開発していますということで使い方と便利なポイントを記事にしました。ぜひ読んでみて下さい。よかったら試しに使ってみて下さい。 naopoyo.com/docs/creating-…
## 見出し
### h3
#### h4
##### h5
###### h6
- Item1
- Item2
- Item2-1
- Item2-2
- Item3
1. Item1
2. Item2
3. Item3
- [ ] Task1
- [x] Task2
- [ ] Task3
const message: string = "Hello, World!";
console.log(message);
```typescript:hello.ts
const message: string = "Hello, World!";
console.log(message);
```
const message: string = "Hello, World!";
const message: string = "Hello, New World!";
console.log(message);
```typescript:hello.ts
const message: string = "Hello, World!"; // [!code --]
const message: string = "Hello, New World!"; // [!code ++]
console.log(message);
```
const message: string = "Hello, World!";
console.log(message);
```typescript:hello.ts
const message: string = "Hello, World!"; // [!code highlight]
console.log(message);
```
const message: string = "Hello, World!";
console.log(message);
```typescript:hello.ts
// [!code word:Hello]
const message: string = "Hello, World!";
console.log(message);
```
インラインで some code
を記述できます。
インラインで `some code` を記述できます。
太字、イタリック、取り消し線でテキストを装飾できます。
テキストが 太字 になります。
テキストが **太字** になります。
テキストが イタリック になります。
テキストが _イタリック_ になります。
テキストが イタリック太字 になります。
テキストが **_イタリック太字_** になります。
テキストに 取り消し線 を表示します。
テキストに ~~取り消し線~~ を表示します。
Header | Header | Header |
---|---|---|
Data | Data | Data |
Data | Data | Data |
| Header | Header | Header |
| ------ | ------ | ------ |
| Data | Data | Data |
| Data | Data | Data |
[Title](https://example.com)
この文章は引用です
この文章は引用です
この文章は引用です
> この文章は引用です
>
> この文章は引用です
>
> この文章は引用です

数式を インラインで表示します。
数式を $a\ne0$ インラインで表示します。
$$
f(x) = \int_{-\infty}^\infty
\hat f(\xi)\,e^{2 \pi i \xi x}
\,d\xi
$$
以下に簡単な脚注を示します1。
脚注には複数行を含めることもできます2。
以下に簡単な脚注を示します[^1]。
脚注には複数行を含めることもできます[^2]。
[^1]: 参考資料。
[^2]:
脚注内に改行を追加するには、新しい行の前に 2 つのスペースを付けます。
これは 2 行目です。
---
puts 'Hello, World'
<details><summary>サンプルコード</summary>
```rb
puts 'Hello, World'
```
</details>
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
アラートは、重要な情報を強調する際に使用できるブロッククォート構文に基づいたMarkdown拡張です。
Note
内容をざっと読み飛ばしても、ユーザーが知っておくべき有益な情報。
> [!NOTE]
> 内容をざっと読み飛ばしても、ユーザーが知っておくべき有益な情報。
Tip
物事をより良く、またはより簡単に行うための役立つアドバイス。
> [!TIP]
> 物事をより良く、またはより簡単に行うための役立つアドバイス。
Important
ユーザーが目標を達成するために知っておくべき重要な情報。
> [!IMPORTANT]
> ユーザーが目標を達成するために知っておくべき重要な情報。
Warning
問題を回避するために、ユーザーがすぐに注意を払うべき緊急の情報。
> [!WARNING]
> 問題を回避するために、ユーザーがすぐに注意を払うべき緊急の情報。
Caution
特定の行動に伴うリスクや悪影響についての助言。
> [!CAUTION]
> 特定の行動に伴うリスクや悪影響についての助言。
Hacker Sheetでは以下のMarkdown拡張が利用可能です。
::x-post[https://x.com/naopoyo_tw/status/1745099727606276538]
::youtube[https://www.youtube.com/watch?v=jNQXAC9IVRw]
::gist[https://gist.github.com/naopoyo/a86f5f9414a7b547d7df338a5d2f1873]
::link-card[https://hackersheet.com/]
コードブロックの言語の部分を kifu:<kifu ID>
にすることでプレーヤーに変換します。<kifu ID>
は手数の移動に使用します。
```kifu:mykifu
先手:相手 3級
後手:自分 26級
棋戦:将棋ウォーズ(10分切れ負け)
持ち時間:10分
先手の戦型:UFO銀
後手の戦型:四間飛車
先手の囲い:居玉
先手の備考:居飛車, 対振り, 対抗型
後手の備考:振り飛車, 対抗型
手合割:平手
手数----指手---------消費時間--
1 2六歩(27) (00:01/00:00:01)
*▲備考:居飛車
2 4二飛(82) (00:22/00:00:22)
*△戦型:四間飛車
*△備考:振り飛車
3 3八銀(39) (00:05/00:00:06)
4 7二銀(71) (00:05/00:00:27)
5 2七銀(38) (00:02/00:00:08)
6 6二玉(51) (00:08/00:00:35)
7 3六銀(27) (00:03/00:00:11)
*▲戦型:UFO銀
8 3二銀(31) (00:11/00:00:46)
9 2五歩(26) (00:06/00:00:17)
10 3四歩(33) (00:13/00:00:59)
11 2四歩(25) (00:03/00:00:20)
12 2四歩(23) (00:07/00:01:06)
13 2四飛(28) (00:01/00:00:21)
14 2三歩打 (00:09/00:01:15)
15 2八飛(24) (00:03/00:00:24)
16 7一玉(62) (00:05/00:01:20)
17 2五銀(36) (00:02/00:00:26)
18 3三銀(32) (00:24/00:01:44)
19 2四歩打 (00:02/00:00:28)
20 2四歩(23) (00:01/00:01:45)
21 2四銀(25) (00:02/00:00:30)
22 2四銀(33) (00:06/00:01:51)
23 2四飛(28) (00:01/00:00:31)
24 3三桂(21) (01:36/00:03:27)
25 2三飛成(24) (00:08/00:00:39)
26 4五桂(33) (00:03/00:03:30)
27 4八金(49) (00:08/00:00:47)
28 4四角(22) (01:04/00:04:34)
29 3三銀打 (00:25/00:01:12)
30 3三角(44) (00:38/00:05:12)
31 3三龍(23) (00:05/00:01:17)
32 2八歩打 (00:07/00:05:19)
33 3四龍(33) (00:19/00:01:36)
34 3九銀打 (00:35/00:05:54)
35 5八金(48) (00:11/00:01:47)
36 5七桂成(45) (00:10/00:06:04)
37 5七金(58) (00:04/00:01:51)
38 4八銀打 (00:14/00:06:18)
39 6八玉(59) (00:03/00:01:54)
40 2九歩成(28) (00:06/00:06:24)
41 5八金(57) (00:10/00:02:04)
42 4九銀成(48) (00:50/00:07:14)
43 7六歩(77) (01:14/00:03:18)
44 4八銀成(39) (00:32/00:07:46)
45 4八金(58) (00:16/00:03:34)
46 4八成銀(49) (00:05/00:07:51)
47 1一角成(88) (00:03/00:03:37)
48 1九と(29) (00:27/00:08:18)
49 2一馬(11) (00:46/00:04:23)
50 3二飛(42) (00:47/00:09:05)
51 2三香打 (00:10/00:04:33)
52 3四飛(32) (00:04/00:09:09)
53 4三馬(21) (00:02/00:04:35)
54 3七飛成(34) (00:27/00:09:36)
55 7五桂打 (00:24/00:04:59)
56 4七龍(37) (00:05/00:09:41)
57 5三馬(43) (00:03/00:05:02)
58 6二金打 (00:05/00:09:46)
59 3五馬(53) (00:09/00:05:11)
60 5六桂打 (00:03/00:09:49)
61 7七玉(68) (00:03/00:05:14)
62 切れ負け
まで61手で時間切れにより先手の勝ち
```
文章内から、特定の手数に移動させることができます。
:kifu-to[mykifu#0]{label="開始局面"} に移動、:kifu-to[mykifu#3] に移動。
開発者向けのヘッドレスCMSを開発していますということで使い方と便利なポイントを記事にしました。ぜひ読んでみて下さい。よかったら試しに使ってみて下さい。 naopoyo.com/docs/creating-…
'use client' | |
import { ComputerIcon, MoonIcon, SunIcon } from 'lucide-react' | |
import { useTheme } from 'next-themes' | |
import { useEffect, useState } from 'react' | |
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group' | |
export default function ThemeSwitcher() { | |
const [mounted, setMounted] = useState(false) | |
const { theme, setTheme } = useTheme() | |
useEffect(() => { | |
setMounted(true) | |
}, []) | |
if (!mounted || theme === undefined) { | |
return | |
} | |
return ( | |
<ToggleGroup | |
className='rounded-full border p-1' | |
size='sm' | |
type='single' | |
value={theme} | |
onValueChange={(value) => setTheme(value)} | |
> | |
<ToggleGroupItem className='rounded-full' value='dark' aria-label='Toggle dark'> | |
<MoonIcon size={16} /> | |
</ToggleGroupItem> | |
<ToggleGroupItem className='rounded-full' value='system' aria-label='Toggle system'> | |
<ComputerIcon size={16} /> | |
</ToggleGroupItem> | |
<ToggleGroupItem className='rounded-full' value='light' aria-label='Toggle light'> | |
<SunIcon size={16} /> | |
</ToggleGroupItem> | |
</ToggleGroup> | |
) | |
} |