naopoyo.com
✏️

Hacker SheetのMarkdown記法の仕様

公開日
4か月前
2024-07-18
更新日
4か月前
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)

数式（インライン）

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

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

数式（ブロック）

f(x)=∫−∞∞f^(ξ) e2πiξx dξ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>
)
}
view raw theme-switcher.tsx hosted with ❤ by GitHub
Markdown
::gist[https://gist.github.com/naopoyo/a86f5f9414a7b547d7df338a5d2f1873]

リンクカードの表示

Hacker Sheet
開発者向けのHeadless CMSです。Markdown形式のドキュメントをGitHubで管理するだけで、まとめてGraphQL APIにできます。
hackersheet.com favicon
hackersheet.com
Hacker Sheet
Markdown
::link-card[https://hackersheet.com/]

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

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

コードブロックの言語の部分を kifu:<kifu ID> にすることでプレーヤーに変換します。<kifu ID> は手数の移動に使用します。

Markdown
```kifu:mykifu
先手：相手 3級
後手：自分 26級
棋戦：将棋ウォーズ(10分切れ負け)
持ち時間：10分
先手の戦型：UFO銀
後手の戦型：四間飛車
先手の囲い：居玉
先手の備考：居飛車, 対振り, 対抗型
後手の備考：振り飛車, 対抗型
手合割：平手
手数----指手---------消費時間--
   1 ２六歩(27)   (00:01/00:00:01)
*▲備考：居飛車
   2 ４二飛(82)   (00:22/00:00:22)
*△戦型：四間飛車
*△備考：振り飛車
   3 ３八銀(39)   (00:05/00:00:06)
   4 ７二銀(71)   (00:05/00:00:27)
   5 ２七銀(38)   (00:02/00:00:08)
   6 ６二玉(51)   (00:08/00:00:35)
   7 ３六銀(27)   (00:03/00:00:11)
*▲戦型：UFO銀
   8 ３二銀(31)   (00:11/00:00:46)
   9 ２五歩(26)   (00:06/00:00:17)
  10 ３四歩(33)   (00:13/00:00:59)
  11 ２四歩(25)   (00:03/00:00:20)
  12 ２四歩(23)   (00:07/00:01:06)
  13 ２四飛(28)   (00:01/00:00:21)
  14 ２三歩打     (00:09/00:01:15)
  15 ２八飛(24)   (00:03/00:00:24)
  16 ７一玉(62)   (00:05/00:01:20)
  17 ２五銀(36)   (00:02/00:00:26)
  18 ３三銀(32)   (00:24/00:01:44)
  19 ２四歩打     (00:02/00:00:28)
  20 ２四歩(23)   (00:01/00:01:45)
  21 ２四銀(25)   (00:02/00:00:30)
  22 ２四銀(33)   (00:06/00:01:51)
  23 ２四飛(28)   (00:01/00:00:31)
  24 ３三桂(21)   (01:36/00:03:27)
  25 ２三飛成(24) (00:08/00:00:39)
  26 ４五桂(33)   (00:03/00:03:30)
  27 ４八金(49)   (00:08/00:00:47)
  28 ４四角(22)   (01:04/00:04:34)
  29 ３三銀打     (00:25/00:01:12)
  30 ３三角(44)   (00:38/00:05:12)
  31 ３三龍(23)   (00:05/00:01:17)
  32 ２八歩打     (00:07/00:05:19)
  33 ３四龍(33)   (00:19/00:01:36)
  34 ３九銀打     (00:35/00:05:54)
  35 ５八金(48)   (00:11/00:01:47)
  36 ５七桂成(45) (00:10/00:06:04)
  37 ５七金(58)   (00:04/00:01:51)
  38 ４八銀打     (00:14/00:06:18)
  39 ６八玉(59)   (00:03/00:01:54)
  40 ２九歩成(28) (00:06/00:06:24)
  41 ５八金(57)   (00:10/00:02:04)
  42 ４九銀成(48) (00:50/00:07:14)
  43 ７六歩(77)   (01:14/00:03:18)
  44 ４八銀成(39) (00:32/00:07:46)
  45 ４八金(58)   (00:16/00:03:34)
  46 ４八成銀(49) (00:05/00:07:51)
  47 １一角成(88) (00:03/00:03:37)
  48 １九と(29)   (00:27/00:08:18)
  49 ２一馬(11)   (00:46/00:04:23)
  50 ３二飛(42)   (00:47/00:09:05)
  51 ２三香打     (00:10/00:04:33)
  52 ３四飛(32)   (00:04/00:09:09)
  53 ４三馬(21)   (00:02/00:04:35)
  54 ３七飛成(34) (00:27/00:09:36)
  55 ７五桂打     (00:24/00:04:59)
  56 ４七龍(37)   (00:05/00:09:41)
  57 ５三馬(43)   (00:03/00:05:02)
  58 ６二金打     (00:05/00:09:46)
  59 ３五馬(53)   (00:09/00:05:11)
  60 ５六桂打     (00:03/00:09:49)
  61 ７七玉(68)   (00:03/00:05:14)
  62 切れ負け
まで61手で時間切れにより先手の勝ち
```

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

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

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

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

  1. 参考資料。 ↩

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

最近公開された記事

🛀
Next.jsのプロジェクトをDockerコンテナ上に作成する
約2か月前 - 2024-09-23
  • Next.js
  • Docker
😉
VSCode Dev ContainerのzshをpostCreateCommandでカスタマイズする
約2か月前 - 2024-09-22
  • Docker
  • VS Code
  • zsh
💎
RailsのプロジェクトをDockerコンテナ上に作成する
約2か月前 - 2024-09-21
  • Rails
  • Ruby
  • Docker