開発者向けのヘッドレスCMSを開発していますということで使い方と便利なポイントを記事にしました。ぜひ読んでみて下さい。よかったら試しに使ってみて下さい。 naopoyo.com/docs/creating-…
見出し
h3
h4
h5
h6
Markdown
## 見出し
### h3
#### h4
##### h5
###### h6
リスト
- Item1
- Item2
- Item2-1
- Item2-2
- Item3
Markdown
- Item1
- Item2
- Item2-1
- Item2-2
- Item3
- Item1
- Item2
- Item3
Markdown
1. Item1
2. Item2
3. Item3
- Task1
- Task2
- Task3
Markdown
- [ ] Task1
- [x] Task2
- [ ] Task3
コードブロック
hello.ts
const message: string = "Hello, World!";
console.log(message);
Markdown
```typescript:hello.ts
const message: string = "Hello, World!";
console.log(message);
```
コードブロックにdiffを表示する
hello.ts
const message: string = "Hello, World!";
const message: string = "Hello, New World!";
console.log(message);
Markdown
```typescript:hello.ts
const message: string = "Hello, World!"; // [!code --]
const message: string = "Hello, New World!"; // [!code ++]
console.log(message);
```
コードブロックの行をハイライト
hello.ts
const message: string = "Hello, World!";
console.log(message);
Markdown
```typescript:hello.ts
const message: string = "Hello, World!"; // [!code highlight]
console.log(message);
```
コードブロックの文字をハイライト
hello.ts
const message: string = "Hello, World!";
console.log(message);
Markdown
```typescript:hello.ts
// [!code word:Hello]
const message: string = "Hello, World!";
console.log(message);
```
インラインコード
インラインで some code
を記述できます。
Markdown
インラインで `some code` を記述できます。
テキスト装飾
太字、イタリック、取り消し線でテキストを装飾できます。
太字
テキストが 太字 になります。
Markdown
テキストが **太字** になります。
イタリック
テキストが イタリック になります。
Markdown
テキストが _イタリック_ になります。
イタリック+太字
テキストが イタリック太字 になります。
Markdown
テキストが **_イタリック太字_** になります。
取り消し線
テキストに 取り消し線 を表示します。
Markdown
テキストに ~~取り消し線~~ を表示します。
表
Header | Header | Header |
---|---|---|
Data | Data | Data |
Data | Data | Data |
Markdown
| Header | Header | Header |
| ------ | ------ | ------ |
| Data | Data | Data |
| Data | Data | Data |
リンク
Markdown
[Title](https://example.com)
引用
この文章は引用です
この文章は引用です
この文章は引用です
Markdown
> この文章は引用です
>
> この文章は引用です
>
> この文章は引用です
画像
Markdown
![Hacker Sheetトップページ](/assets/2024-07-18-hacker-sheetのmarkdown記法の仕様/hackersheet-top-page.jpg)
数式(インライン)
数式を インラインで表示します。
Markdown
数式を $a\ne0$ インラインで表示します。
数式(ブロック)
Markdown
$$
f(x) = \int_{-\infty}^\infty
\hat f(\xi)\,e^{2 \pi i \xi x}
\,d\xi
$$
脚注
以下に簡単な脚注を示します1。
脚注には複数行を含めることもできます2。
Markdown
以下に簡単な脚注を示します[^1]。
脚注には複数行を含めることもできます[^2]。
[^1]: 参考資料。
[^2]:
脚注内に改行を追加するには、新しい行の前に 2 つのスペースを付けます。
これは 2 行目です。
区切り線
Markdown
---
コンテンツの折りたたみ
サンプルコード
puts 'Hello, World'
Markdown
<details><summary>サンプルコード</summary>
```rb
puts 'Hello, World'
```
</details>
ダイアグラム・チャート(Mermaid)
Loading...
Markdown
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
アラート
アラートは、重要な情報を強調する際に使用できるブロッククォート構文に基づいたMarkdown拡張です。
NOTE
Note
内容をざっと読み飛ばしても、ユーザーが知っておくべき有益な情報。
Markdown
> [!NOTE]
> 内容をざっと読み飛ばしても、ユーザーが知っておくべき有益な情報。
TIP
Tip
物事をより良く、またはより簡単に行うための役立つアドバイス。
Markdown
> [!TIP]
> 物事をより良く、またはより簡単に行うための役立つアドバイス。
IMPORTANT
Important
ユーザーが目標を達成するために知っておくべき重要な情報。
Markdown
> [!IMPORTANT]
> ユーザーが目標を達成するために知っておくべき重要な情報。
WARNING
Warning
問題を回避するために、ユーザーがすぐに注意を払うべき緊急の情報。
Markdown
> [!WARNING]
> 問題を回避するために、ユーザーがすぐに注意を払うべき緊急の情報。
CAUTION
Caution
特定の行動に伴うリスクや悪影響についての助言。
Markdown
> [!CAUTION]
> 特定の行動に伴うリスクや悪影響についての助言。
Hacker Sheet独自記法
Hacker Sheetでは以下のMarkdown拡張が利用可能です。
Xの投稿を埋め込む
Markdown
::x-post[https://x.com/naopoyo_tw/status/1745099727606276538]
Youtubeの埋め込み
Markdown
::youtube[https://www.youtube.com/watch?v=jNQXAC9IVRw]
GitHub Gistの埋め込み
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'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> | |
) | |
} |
Markdown
::gist[https://gist.github.com/naopoyo/a86f5f9414a7b547d7df338a5d2f1873]
リンクカードの表示
Hacker Sheet
開発者向けのHeadless CMSです。Markdown形式のドキュメントをGitHubで管理するだけで、まとめてGraphQL APIにできます。
hackersheet.com
![Hacker Sheet](/_next/image?url=https%3A%2F%2Fpublic-content.hackersheet.com%2Fwebsite-og-images%2F1b3edffe-e692-47d1-b749-7d79bebffe96.png&w=3840&q=75)
Markdown
::link-card[https://hackersheet.com/]
棋譜プレーヤーの埋め込み
棋譜プレーヤーの埋め込み方法
コードブロックの言語の部分を kifu:<kifu ID>
にすることでプレーヤーに変換します。<kifu ID>
は手数の移動に使用します。
Markdown
```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手で時間切れにより先手の勝ち
```
棋譜プレーヤーの特定の手数への移動
文章内から、特定の手数に移動させることができます。
Markdown
:kifu-to[mykifu:0]{label="開始局面"} に移動、:kifu-to[mykifu:3] に移動。
Footnotes