プレビュー
対応記法
GitHub Flavored Markdownに近い表示を目指します。以下はカテゴリ別の対応記法一覧です。
基本記法(CommonMark)
| 記法 | 例 |
|---|---|
| 見出し | # H1 〜 ###### H6、Setext(=== / ---) |
| 段落 | 空行で区切り |
| 太字 | **テキスト** または __テキスト__ |
| 斜体 | *テキスト* または _テキスト_ |
| 太字 + 斜体 | ***テキスト*** |
| インラインコード | `code` |
| コードブロック | フェンス(トリプルバッククォート)またはインデント(4スペース) |
| リンク | [テキスト](URL)、[テキスト][参照] |
| 画像 |  |
| 箇条書き | - 項目、* 項目、+ 項目 |
| 番号付きリスト | 1. 項目 |
| 引用 | > テキスト |
| 水平線 | ---、***、___ |
| 改行 | 末尾にスペース2つ、または \ |
| エスケープ | \*、\[ など |
| HTML エンティティ | &、😀 など |
GFM 拡張
| 記法 | 例 |
|---|---|
| テーブル | パイプ区切り + ヘッダー行 + 配置(:---、:---:、---:) |
| タスクリスト | - [x] 完了、- [ ] 未完了 |
| 打ち消し線 | ~~テキスト~~ |
| 自動リンク | URL、www. リンク、メールアドレス |
GitHub 独自記法
| 記法 | 例 |
|---|---|
| アラート | > [!NOTE]、> [!TIP]、> [!IMPORTANT]、> [!WARNING]、> [!CAUTION] |
| 絵文字ショートコード | :smile:、:+1:、:rocket: |
| 単一チルダ打ち消し | ~テキスト~ |
数式(KaTeX)
| 形式 | 表示 | 例 |
|---|---|---|
$…$ | インライン | $E = mc^2$ |
$$…$$ | ブロック(ディスプレイ) | $$\int_0^\infty …$$ |
\(…\) | インライン | \(\sqrt{x}\) |
\[…\] | ブロック(ディスプレイ) | \[\int …\] |
```math フェンスブロック | ブロック(ディスプレイ) | math 言語指定のフェンスドコードブロック |
$`…`$ | インライン | $`\binom{n}{k}`$ |
Mermaid 図
mermaid 言語指定のフェンスドコードブロックはインタラクティブな図として描画されます。フローチャート、シーケンス図、クラス図、ガントチャートなどに対応。テーマはアプリのライト/ダーク設定に追従します。ズーム/パンの操作方法は下記を参照してください。
その他の拡張
| 機能 | 説明 |
|---|---|
| 脚注 | [^ラベル] 参照 + [^ラベル]: 定義 |
| HTML 要素 | <details>、<summary>、<sub>、<sup>、<mark>、<kbd> |
| 画像サイズ指定 |  でサイズを指定 |
| シンタックスハイライト | フェンスドコードブロックの言語別コード着色 |
| カラーコードプレビュー | #0a66d6、#f80、#8250dfcc のような16進カラーにインライン色見本を表示 |
テーマとズーム
View > Theme で System、Light、Dark を選べます。View > Zoom でプレビューのフォントサイズを変更できます。
Mermaid 図
各 Mermaid 図は本文幅に揃ったカード内に描画されます。図の中のテキストは本文サイズより大きくならないよう自動で調整され、本文 → 図の視線移動が自然になります。
詳細を確認したいときはズーム・パン操作ができます。
- カードをホバー(または
Tabでフォーカス)するとツールバーが右上に表示されます。 - + / − で拡大・縮小、Reset で初期サイズに戻ります。
⌘(またはCtrl)+ マウスホイールでも拡大・縮小できます。- 拡大中、または図がカードからはみ出しているときはカード内をドラッグして表示位置を移動できます。
リンク
ページ内アンカーは同じプレビュー内でスクロールします。相対MarkdownリンクはSkimDown内で開き、ツリー選択も移動します。外部リンクは既定ブラウザで開きます。
ローカル画像
ローカル画像は、開いているフォルダ内にある場合だけ表示します。画像ファイル単体はサイドバー項目として表示しません。