Skip to content

プレビュー ​

対応記法 ​

GitHub Flavored Markdownに近い表示を目指します。以下はカテゴリ別の対応記法一覧です。

基本記法(CommonMark) ​

記法例
見出し# H1 〜 ###### H6、Setext(=== / ---)
段落空行で区切り
太字**テキスト** または __テキスト__
斜体*テキスト* または _テキスト_
太字 + 斜体***テキスト***
インラインコード`code`
コードブロックフェンス(トリプルバッククォート)またはインデント(4スペース)
リンク[テキスト](URL)、[テキスト][参照]
画像![代替テキスト](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>
画像サイズ指定![代替テキスト](URL =幅x高さ) でサイズを指定
シンタックスハイライトフェンスドコードブロックの言語別コード着色
カラーコードプレビュー#0a66d6、#f80、#8250dfcc のような16進カラーにインライン色見本を表示

テーマとズーム ​

View > Theme で System、Light、Dark を選べます。View > Zoom でプレビューのフォントサイズを変更できます。

Mermaid 図 ​

各 Mermaid 図は本文幅に揃ったカード内に描画されます。図の中のテキストは本文サイズより大きくならないよう自動で調整され、本文 → 図の視線移動が自然になります。

詳細を確認したいときはズーム・パン操作ができます。

  • カードをホバー(または Tab でフォーカス)するとツールバーが右上に表示されます。
  • + / − で拡大・縮小、Reset で初期サイズに戻ります。
  • ⌘(または Ctrl)+ マウスホイールでも拡大・縮小できます。
  • 拡大中、または図がカードからはみ出しているときはカード内をドラッグして表示位置を移動できます。

リンク ​

ページ内アンカーは同じプレビュー内でスクロールします。相対MarkdownリンクはSkimDown内で開き、ツリー選択も移動します。外部リンクは既定ブラウザで開きます。

ローカル画像 ​

ローカル画像は、開いているフォルダ内にある場合だけ表示します。画像ファイル単体はサイドバー項目として表示しません。

Released under the GPL-3.0 License.