# Markdown プレビュー プラグイン

テキストエディター Mery のウィンドウ内で編集中のファイルと並べて Markdown のプレビューを表示し、編集内容をリアルタイムに反映して確認できるプラグインです。

## 機能

- WebView2 を搭載
- GitHub スタイルのテーマを採用
- ソースコードのシンタックス ハイライト
- 数式の表示 (KaTeX)
- ダイアグラムやチャートの表示 (Mermaid)
- 分かち書き (BudouX)
- PDF 形式で保存
- HTML 形式で保存
- Word、OpenOffice、EPUB 形式などのインポート/エクスポート
- エディターとプレビューを同期してスクロール
- 拡張 Markdown 記法に対応
	- タスク リスト
	- 絵文字
	- 脚注
	- 改行を `<br>` に変換
	- URL を自動的にリンクへ変換
	- タイポグラファー
	- `==` によるハイライト
- markdown-it プラグインに対応

## はじめに

**動作環境**
- Windows 11、10 をサポートしています。
- Mery v2.6.7 以降をインストールしている必要があります。(v3.8.0 以降を推奨)
- インポート/エクスポートには [Pandoc](https://pandoc.org/installing.html) をインストールしている必要があります。

**アーカイブに含まれるファイル**
- Plugins/MarkdownPreview.dll: プラグイン本体
- WebView2Loader.dll: WebView2 ローダー ライブラリ
- ThirdPartyNotices.txt: サードパーティ製コンポーネントのライセンス
- eula.html: ソフトウェア使用許諾書
- CHANGELOG.txt: 変更ログ
- README.txt: 本ドキュメント

## インストール

1. アーカイブを展開し、`MarkdownPreview.dll` を `Mery.exe` のインストール先の `Plugins` フォルダーにコピーしてください。
2. Mery を起動すると、[ツール] メニューの [プラグイン] にインストールしたプラグインの項目が追加されます。

**Mery v3.4.1 未満の場合***
- `WebView2Loader.dll` を `Mery.exe` のインストール先フォルダーにコピーしてください。

### WebView2 ランタイムについて

- Windows 11 以降、または Windows 10 (1803) 以降では、WebView2 ランタイムを標準で利用できます。
- それ未満のバージョンでは、WebView2 ランタイムをインストールする必要があります。
- WebView2 ランタイムには「エバーグリーン ランタイム配布モード」と「固定バージョン ランタイム配布モード」があります。
	- それぞれに長所と短所があるため、利用環境に合わせていずれかをインストールしてください。

#### エバーグリーン ランタイム配布モード

[こちら](https://developer.microsoft.com/ja-jp/microsoft-edge/webview2/)から「エバーグリーンブートストラップ」または「エバーグリーンスタンドアロンインストーラー」をダウンロードしてインストールしてください。

- インストールには管理者権限が必要です。
- WebView2 ランタイムは自動的に更新され、常に最新の状態に保たれます。
- セキュリティ更新プログラムは自動的に適用されます。
- WebView2 API の仕様変更により、動作しなくなる可能性があります。

#### 固定バージョン ランタイム配布モード

[こちら](https://developer.microsoft.com/ja-jp/microsoft-edge/webview2/)から「固定バージョン」 をダウンロードし、WinRAR などの圧縮/解凍ソフトを使用して展開してください。

展開して作成されたフォルダーを `WebView2` に名前を変更し、`Mery.exe` と同じフォルダーに配置してください。

- インストールに管理者権限は必要ありません。
- WebView2 ランタイムを Mery と一緒に配布できます。
- WebView2 ランタイムのバージョンを固定することで、動作確認済みの環境を配布できます。
- ポータブル版として持ち運べます。
- セキュリティ更新プログラムは自動的に適用されません。

### Pandoc について

Word、OpenOffice、EPUB 形式などのインポート/エクスポートには Pandoc が必要です。

- Windows 用 Pandoc は[こちら](https://pandoc.org/installing.html)からインストールしてください。
- Pandoc のセットアップ完了後、Mery の再起動が必要になる場合があります。

#### ZIP 版

[こちら](https://github.com/jgm/pandoc/releases)から ZIP 版をダウンロードし、WinRAR などの圧縮/解凍ソフトを使用して展開してください。

Markdown プレビューの [オプション] の [エクスポート] ページにある [Pandoc のパス] に `pandoc.exe` を指定してください。

- インストールに管理者権限は必要ありません。
- インストール不要のため、環境を汚さず、ポータブル版としても使用できます。

## アップデート

- アーカイブを展開し、`Plugins` フォルダーの内容を Mery の `Plugins` フォルダーに上書きしてください。

## アンインストール

- Mery の `Plugins` フォルダーからアンインストールしたいプラグイン (*.dll) を削除してください。
- 設定ファイルは以下のフォルダーに保存されているため、手動で削除してください。

```
C:\Users\<UserName>\AppData\Roaming\Mery\Plugins\MarkdownPreview
```

## 使い方

1. [ツール] メニューから [プラグイン] の [Markdown プレビュー] を選択すると、プラグインが起動します。
2. エディターで Markdown を記述すると、プレビューがリアルタイムで更新されます。

## コンテキスト メニュー

プレビュー上で右クリックすると、コンテキスト メニューが表示されます。

**最新の情報に更新**
- プレビューを最新の状態に更新します。画像ファイルを差し替えた場合などに使用します。

**文字のサイズ**
- プレビューの文字サイズを、[オプション] の [フォント サイズ] を基準に [最大]、[大]、[中]、[小]、[最小] から選択します。

**名前を付けて保存**
- [名前を付けて保存] ダイアログを表示し、プレビューを [HTML ファイル]、[HTML ファイル (HTML のみ)]、または [PDF ファイル] として保存します。
- 1 行目に `<!-- title: 任意の文字列 -->` と記述すると、HTML のタイトル要素または PDF のヘッダーにその文字列を出力します。
- HTML ファイルとして保存する場合、`.md` ファイルへのリンクは `.html` に変換されます。

**印刷**
- [印刷] ダイアログを表示し、プレビューを印刷します。

**インポート**
- Pandoc を使用して、さまざまな形式のファイルをインポートします。この機能を使用するには Pandoc が必要です。

**エクスポート**
- Pandoc を使用して、さまざまな形式のファイルにエクスポートします。この機能を使用するには Pandoc が必要です。

**名前を付けて図を保存**
- [名前を付けて保存] ダイアログを表示し、図を PNG または SVG 形式で保存します。
- Mermaid で描画された図を右クリックした場合のみ表示されます。

**図をコピー**
- 図をクリップボードにコピーします。
- Mermaid で描画された図を右クリックした場合のみ表示されます。

**コピー**
- 選択した内容をクリップボードにコピーします。

**すべて選択**
- プレビュー内の内容をすべて選択します。

**オプション**
- Markdown プレビュー プラグインの [オプション] ダイアログを表示します。

**バージョン情報**
- Markdown プレビュー プラグインの [バージョン情報] ダイアログを表示します。

## オプション

コンテキスト メニューから [オプション] を選択すると、Markdown プレビュー プラグインの [オプション] ダイアログが表示されます。

### 全般

**バーの位置**
- Markdown プレビューを表示する位置を選択します。

**選択された編集モードで自動的に表示する**
- 選択した編集モードに切り替えたときに、Markdown プレビューを自動的に表示します。

### プレビュー

**テーマ**
- プレビューのテーマを [ダーク]、[ライト]、[カスタム] から選択します。
- [カスタム] を選択した場合、[追加のスタイル シート] で指定したスタイル シートのみが適用されます。

**追加のスタイル シート**
- 現在のテーマに追加するスタイル シートを指定します。
- [テーマ] で [カスタム] を選択した場合、このスタイル シートのみが適用されます。

**フォント ファミリ**
- プレビューのフォント ファミリを指定します。
- [テーマ] で [カスタム] を選択した場合、この設定は使用されません。

**フォント サイズ**
- プレビューのフォント サイズを指定します。
- [テーマ] で [カスタム] を選択した場合、この設定は使用されません。

**行の高さ**
- プレビューの行の高さを指定します。
- [テーマ] で [カスタム] を選択した場合、この設定は使用されません。

**エディターのスクロールでプレビューを更新する**
- エディターをスクロールしたとき、プレビューを同期してスクロールします。

**プレビューのスクロールでエディターを更新する**
- プレビューをスクロールしたとき、エディターを同期してスクロールします。

**ダブルクリックでエディターに切り替える**
- プレビューをダブルクリックしたとき、対応する行に移動してエディターにフォーカスを移します。

**プレビューで Markdown ファイルへのリンクを開く**
- オンの場合、プレビュー内で Markdown ファイルへのリンクをクリックすると、そのファイルをプレビューで表示します。
- オフの場合、そのファイルをエディターで開きます。

### Markdown

**先頭と末尾の空白を削除する**
- 段落内の先頭と末尾にある空白 (U+00A0, U+1680​, U+180E, U+2000​-U+200A​, U+200B, U+2028, U+2029, U+202F, U+205F​, U+3000) を削除します。

**改行に対して `<br>` を作成する**
- 段落内の改行を `<br>` に変換します。

**URL 形式のテキストをリンクに変換する**
- URL 形式のテキストを自動的にハイパーリンクに変換します。

**タイポグラファーを有効にする**
- 特殊文字 `(c)`、`(r)`、`(tm)` などの変換を有効にします。

**ハイライト == を有効にする**
- `==` によるハイライトの表示を有効にします。

**数式を有効にする**
- KaTeX を使用した数式の表示を有効にします。

**ダイアグラムとチャートを有効にする**
- Mermaid を使用したダイアグラムとチャートの表示を有効にします。

**テーマ**
- Mermaid のテーマを [default]、[neutral]、[dark]、[forest]、[base] から選択します。
- [base] を選択した場合、[テーマ変数] の設定が適用されます。

**テーマ変数**
- Mermaid の base テーマで使用するテーマ変数を設定します。

例:
```
primaryColor: '#bb2528', primaryTextColor: '#fff', primaryBorderColor: '#7c0000', lineColor: '#f8b229', secondaryColor: '#006100', tertiaryColor: '#fff'
```

**分かち書きを有効にする**
- BudouX を使用した分かち書きを有効にします。

**HTML 形式で保存時に画像のパスを絶対パスに変換する**
- HTML 形式で保存するとき、`img` タグの `src` 属性を相対パスから絶対パスに変換します。

**HTML 形式で保存時に画像を Base64 に変換する**
- HTML 形式で保存するとき、画像を Base64 エンコードして `src` 属性に埋め込みます。

**すべての画像の表示を許可する**
- Markdown ファイルと同じ階層より上にあるフォルダーの画像も表示できるようにします。
- 信頼できない Markdown ファイルを開く場合は、意図しないファイルの読み込みにご注意ください。

### 印刷

[印刷] または [名前を付けて保存] で [PDF ファイル] を選択したときの外観を設定します。

**テーマ**
- テーマを [カラー]、[モノクロ]、[カスタム] から選択します。
- [カスタム] を選択した場合、[追加のスタイル シート] で指定したスタイル シートのみが適用されます。

**追加のスタイル シート**
- 現在のテーマに追加するスタイル シートを指定します。
- [テーマ] で [カスタム] を選択した場合、このスタイル シートのみが適用されます。

**フォント ファミリ**
- フォント ファミリを指定します。
- [テーマ] で [カスタム] を選択した場合、この設定は使用されません。

**フォント サイズ**
- フォント サイズを指定します。
- [テーマ] で [カスタム] を選択した場合、この設定は使用されません。

**行の高さ**
- 行の高さを指定します。
- [テーマ] で [カスタム] を選択した場合、この設定は使用されません。

### プラグイン

**use()**
- markdown-it の `use()` に渡す引数を指定します。

#### プラグインを追加する

markdown-it はプラグインに対応しており、プラグインを追加することで Markdown の構文を拡張できます。

1. [オプション] ダイアログの [プラグイン] ページを開きます。
2. [追加] ボタンをクリックし、プラグイン ファイル (`*.js`) を選択します。
3. [use()] にプラグイン名と、必要に応じてオプションを指定します。

**markdown-it のプラグインと例**
- プラグインは一覧の上から順に読み込まれます。
- [上へ] ボタンと [下へ] ボタンを使用して、読み込み順序を変更できます。
- markdown-it の[プラグイン](https://github.com/markdown-it/markdown-it#syntax-extensions)には、添字、上付き文字、脚注、定義リストなど、さまざまなものがあります。
- たとえば、[添字プラグイン](https://www.jsdelivr.com/package/npm/markdown-it-sup)を使用する場合は、`dist` フォルダー内の `markdown-it-sub.min.js` を追加し、[use()] に `markdownitSub` を指定します。
- `use()` の値は、多くの場合、自動的に入力されます。

### エクスポート

**Pandoc のパス**
- `pandoc.exe` が自動的に検出されない場合は、そのパスを指定します。

**完了時にフォルダーを開く**
- エクスポート完了時に、出力先のフォルダーを自動的に開きます。

### エクスポート形式

**引数**
- Pandoc に渡す引数が表示されます。

**追加の引数**
- [引数] に追加する引数を指定します。

**その他の項目**
- Word 形式の [スタイル参照] など、出力形式によっては追加の設定項目があります。

#### Word 文書にスタイルを適用する

Pandoc の Word 形式にはスタイル参照 (Style Reference) という機能があります。この機能を使用すると、Word 文書に任意のスタイルを適用できます。

1. コマンド プロンプトで `pandoc -o custom-reference.docx --print-default-data-file reference.docx` を実行すると、`custom-reference.docx` が作成されます。
2. `custom-reference.docx` を Word で開き、必要に応じてスタイルを変更して保存します。
3. [オプション] ダイアログの [エクスポート] ページにある [Word] の [スタイル参照] に `custom-reference.docx` のパスを指定します。
4. Markdown プレビューを右クリックし、コンテキスト メニューから [エクスポート] の [Word] を選択して、Word 文書として保存します。

**custom-reference.docx のスタイルを変更する方法**
- Word の [ホーム] タブにある [スタイル] で、[見出し 1] などのスタイルを右クリックし、[変更] を選択してフォントや色などを設定します。
- `custom-reference.docx` の本文中にある "Heading 1" などの文字列へ直接フォントや色を設定しても反映されません。スタイルを変更してください。

## 数式の描画 (KaTeX)

KaTeX は高速な数式描画ライブラリです。以下は KaTeX を使用した数式の描画例です。

**インライン**
$E=mc^2$

**ブロック**
$$
\sum_{i=1}^{n} i^2 = \frac{n(n+1)(2n+1)}{6}
$$

[数式を有効にする] をオンにすると、Markdown 内の数式を KaTeX を使用して描画します。

## ダイアグラムとチャートの描画 (Mermaid)

Mermaid はダイアグラムやチャートを作成するためのツールです。以下は Mermaid を使用したダイアグラムの例です。

```mermaid
graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;
```

[ダイアグラムとチャートを有効にする] をオンにすると、Markdown 内に記述した Mermaid 記法からダイアグラムやチャートを描画できます。

## 分かち書き (BudouX)

BudouX は日本語のテキストを適切に分かち書きするためのライブラリです。

[分かち書きを有効にする] をオンにすると、BudouX を使用して文書全体に自動的に分かち書きを適用し、読みやすく表示します。

## よくある質問

**WebView2 ランタイムをインストールしても動作しません。**
- Markdown プレビュー プラグインに同梱されている `WebView2Loader.dll` (WebView2 ローダー ライブラリ) を `Mery.exe` と同じフォルダーに配置してください。

**どの Markdown 構文がサポートされていますか？**
- markdown-it の default モード (GFM に近い仕様) に対応しています。
- HTML、タイポグラファー (オプション)、オート リンク (オプション)
- テーブル、取り消し線、絵文字、脚注、タスク リスト、ハイライト (オプション)
- 数式 (KaTeX)
- ダイアグラムとチャート (Mermaid)
- 分かち書き (BudouX)
- 独自仕様として、段落内の先頭と末尾にある全角空白を保持します。

**PDF でヘッダー/フッターの位置や書式を設定できますか？**
- 現在のところ、WebView2 の仕様により、ヘッダー/フッターの位置や書式は固定となっています。

**印刷でヘッダー/フッターの文字列を設定できますか？**
- 現在のところ、WebView2 の印刷画面では、ヘッダー/フッターの文字列を設定する機能は提供されていません。
- PDF ファイルとして保存する場合、1 行目に `<!-- title: 任意の文字列 -->` と記述すると、ヘッダーに指定した文字列を出力できます。

**プレビューの下のほうが表示されません。**
- [エディターのスクロールでプレビューを更新する] が有効になっている場合、エディターを最下部までスクロールしても、プレビューの最下部が表示されないことがあります。
- メイン メニューから [ツール] の [オプション] を開き、[スクロール] ページの [オーバー スクロール] を [半ページ] または [1 ページ] に設定してください。

**markdown-it のプラグインが動作しません。**
- 1 つの JavaScript ファイルだけで動作するプラグイン (多くの場合、`dist` フォルダー内の `*.min.js`) に対応しています。
- 次のようなプラグインには対応していません。
	- `import` や `require` を使用する JavaScript ファイル
	- `use(require('markdown-it-sub'))` のように Node.js 環境を前提としたプラグイン
- その他にも動作しないプラグインがある可能性がありますが、サポート対象外です。

**Word などへのエクスポートで Mermaid ダイアグラムを画像として出力できますか？**
- Word などにエクスポートするとき、Mermaid ダイアグラムを画像として出力するには、Pandoc の Lua フィルター (例: `diagram.lua`) を使用します。
- [エクスポート形式] の [追加の引数] に `--lua-filter=...` を指定してください。
- 詳しくは、`diagram.lua` のドキュメントを参照してください。

**Markdown 構文の入力を支援する機能はありますか？**
- Markdown プレビュー プラグインには Markdown 構文の入力を支援する機能はありません。
- [Markdown バー プラグイン](https://mery.booth.pm/)には、次の機能があります。
	- ボタンひとつで Markdown 記法を入力
	- キーボード ショートカットで Markdown 記法をすばやく入力
	- 目次の作成と更新
	- キーボード操作によるリスト編集を補助
	- Markdown テーブルの整形
	- テキストを貼り付けてリンクを簡単に作成

## 利用規約

- デジタル コンテンツの性質上、返品、返金、キャンセルはできません。誤ってご購入された場合でも、返金はいたしかねますのでご了承ください。
- 本商品および本商品を含むアーカイブの無断転載、複製、再配布を禁止します。
- 本商品の改変、リバース エンジニアリング、逆コンパイルなどの解析行為を禁止します。
- 詳細については、本商品に同梱の `eula.html` ファイルをご確認ください。

## 免責事項

- 本商品のご利用によって生じた損害やトラブルについて、当方は責任を負いません。
- 不具合の修正には努めますが、バージョンアップや不具合修正について、当方は義務を負いません。
- Mery のバージョンアップにともない、プラグインの仕様は予告なく変更される場合があります。
- 本規約は予告なく変更される場合があります。

本商品および BOOTH の BOOST 機能によるご支援は、現状の提供内容に対するものです。サポートや機能改善を保証するものではありませんので、あらかじめご了承ください。

## サポート

最新版は [Haijin Boys Online](https://www.haijin-boys.com/) および [BOOTH](https://mery.booth.pm/) で公開しています。ご質問や不具合のご報告については、情報共有のために[フォーラム](https://www.haijin-boys.com/discussions)をご利用ください。

ご購入いただいた商品に関するお問い合わせは BOOTH のメッセージ機能もご利用いただけます。なお、メールや X でのサポートは行っておりません。

無料版に関する個別のお問い合わせは受け付けておりません。不具合をご報告いただける場合はフォーラムをご利用ください。なお、返信や修正をお約束するものではありません。

## 謝辞

ご購入いただき、ありがとうございます。いただいたご支援は、開発費、開発環境の整備・更新費、素材やコンポーネント、参考書籍の購入費、ならびにブログや Wiki の運営・維持費として、大切に活用させていただきます。

今後も、より良いソフトウェアを提供できるよう努めてまいりますので、引き続きテキストエディター Mery を応援していただければ幸いです。

## ライセンス

**サードパーティ製コンポーネント**
- [highlight.js](https://github.com/highlightjs/highlight.js/)
- [markdown-it](https://github.com/markdown-it/markdown-it)
- [markdown-it-katex](https://github.com/waylonflinn/markdown-it-katex)
- [markdown-it-mermaid](https://github.com/tylingsoft/markdown-it-mermaid)
- [markdown-it-mark](https://github.com/markdown-it/markdown-it-mark)
- [markdown-it-task-lists](https://github.com/revin/markdown-it-task-lists)
- [markdown-it-emoji](https://github.com/markdown-it/markdown-it-emoji)
- [markdown-it-footnote](https://github.com/markdown-it/markdown-it-footnote)
- [github-markdown-css](https://github.com/sindresorhus/github-markdown-css)
- [KaTeX](https://github.com/KaTeX/KaTeX)
- [KaTeX Fonts](https://github.com/KaTeX/katex-fonts)
- [Mermaid](https://github.com/mermaid-js/mermaid)
- [BudouX](https://github.com/google/budoux)
- [Fluent UI System Icons](https://github.com/microsoft/fluentui-system-icons)

著作権およびライセンスについては、本ソフトウェアに同梱されている `ThirdPartyNotices.txt` ファイルに詳細が記載されています。
