✏️

Hacker SheetのMarkdown記法の仕様

公開日
3か月前
2024-07-18
更新日
2か月前
2024-07-28
更新履歴

見出し

h3

h4

h5
h6
Markdown
## 見出し
### h3
#### h4
##### h5
###### h6

リスト

  • Item1
  • Item2
    • Item2-1
    • Item2-2
  • Item3
Markdown
- Item1
- Item2
  - Item2-1
  - Item2-2
- Item3
  1. Item1
  2. Item2
  3. 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
テキストに ~~取り消し線~~ を表示します。

HeaderHeaderHeader
DataDataData
DataDataData
Markdown
| Header | Header | Header |
| ------ | ------ | ------ |
| Data   | Data   | Data   |
| Data   | Data   | Data   |

リンク

Title

Markdown
[Title](https://example.com)

引用

この文章は引用です

この文章は引用です

この文章は引用です

Markdown
> この文章は引用です
>
> この文章は引用です
>
> この文章は引用です

画像

Hacker Sheetトップページ

Markdown
![Hacker Sheetトップページ](/assets/2024-07-18-hacker-sheetのmarkdown記法の仕様/hackersheet-top-page.jpg)

数式(インライン)

数式を a0a\ne0 インラインで表示します。

Markdown
数式を $a\ne0$ インラインで表示します。

数式(ブロック)

f(x)=f^(ξ)e2πiξxdξf(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x} \,d\xi
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の埋め込み

'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]

リンクカードの表示

Markdown
::link-card[https://hackersheet.com/]

棋譜プレーヤーの埋め込み

 3  62
  開始局面
*1 ☗2六歩
*2 ☖4二飛
 3 ☗3八銀
 4 ☖7二銀
 5 ☗2七銀
 6 ☖6二玉
*7 ☗3六銀
 8 ☖3二銀
 9 ☗2五歩
 10 ☖3四歩
 11 ☗2四歩
 12 ☖2四歩
 13 ☗2四飛
 14 ☖2三歩
 15 ☗2八飛
 16 ☖7一玉
 17 ☗2五銀
 18 ☖3三銀
 19 ☗2四歩
 20 ☖2四歩
 21 ☗2四銀
 22 ☖2四銀
 23 ☗2四飛
 24 ☖3三桂
 25 ☗2三飛成
 26 ☖4五桂
 27 ☗4八金
 28 ☖4四角
 29 ☗3三銀
 30 ☖3三角
 31 ☗3三龍
 32 ☖2八歩
 33 ☗3四龍
 34 ☖3九銀
 35 ☗5八金寄
 36 ☖5七桂成
 37 ☗5七金
 38 ☖4八銀打
 39 ☗6八玉
 40 ☖2九歩成
 41 ☗5八金引
 42 ☖4九銀成
 43 ☗7六歩
 44 ☖4八銀成
 45 ☗4八金
 46 ☖4八成銀
 47 ☗1一角成
 48 ☖1九と
 49 ☗2一馬
 50 ☖3二飛
 51 ☗2三香
 52 ☖3四飛
 53 ☗4三馬
 54 ☖3七飛成
 55 ☗7五桂
 56 ☖4七龍
 57 ☗5三馬
 58 ☖6二金打
 59 ☗3五馬
 60 ☖5六桂
 61 ☗7七玉
  時間切れ
棋譜プレーヤーの埋め込み方法

コードブロックの言語の部分を 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手で時間切れにより先手の勝ち
```

棋譜プレーヤーの特定の手数への移動

文章内から、特定の手数に移動させることができます。

開始局面 に移動、3手目 に移動。

Markdown
:kifu-to[mykifu:0]{label="開始局面"} に移動、:kifu-to[mykifu:3] に移動。
Footnotes
  1. 参考資料。

  2. 脚注内に改行を追加するには、新しい行の前に 2 つのスペースを付けます。
    これは 2 行目です。